内容: Angular 表单, 数据类型, 路由, 组件通信和网络请求
一, 表单
1. 引入表单模块
在 / src/App/App.module.ts 文件中增加表单模块的引入
- import { FormsModule } from '@angular/forms'
- // 挂载到整个项目中
- imports: [
- BrowserModule,FormsModule
- ]
2. 使用
在页面组件的 ts 文件中先定义好变量
在页面组件的 html 文件中通过 ngModel 指令来进行数据双向绑定
<input [(ngModel)]="变量名" />
二, 数据类型
typescript 中增加了数据类型, 这样可以保证多人协作开发项目时, 可以避免变量定义和赋值时, 数据类型不一致的问题.
在组件的类中通过冒号来给变量设置数据类型
1. 系统内置类型
- name:String// 字符串
- address:String
- phone:Number// 数字
- isAgree:Boolean// 布尔值
- firends:[]// 数组
- hobby:Object// 对象
2. 自定义数据类型
和 class 平级的地方通过 interface 来定义用户自己的数据类型
export class UserInfoComponent implements OnInit {...}
interface 自定义类型名称 {
字段 1: 数据类型,
字段 2: 数据类型,
..
}
使用:
export class UserInfoComponent implements OnInit {
自定义变量名: 自定义类型名称
}
三, 路由 [重点]
1. 安装
初始化项目时, 选择使用路由
[图片上传失败...(image-8d27df-1583236777255)]
2. 使用
第一步: 创建几个页面组件
第二步: 把 App.module.ts 中引入的页面组件删除
第三步: 在 App-routing.module.ts 中增加页面组件的引入和路由规则的设置
- // 加载页面组件
- import { HomeComponent } from './home/home.component';
- import { LoginComponent } from './login/login.component';
- // 定义路由规则
- const routes: Routes = [
- {
- path:'home',// 不用加斜杠
- component:HomeComponent
- },
- {
- path:'login',
- component:LoginComponent
- },
- {
- path:'**',
- redirectTo:'home'
- }
- ];
注意: 在 angular 中路由规则的 path 属性不需要写斜杠
重定向, path 属性为两个星号, redirect 为 redirectTo
第四步: 在根组件 App.componet.HTML, 把原有内容都删除, 添加一个路由出口标签
<router-outlet />
3. 路由导航
(1) 标签导航
在 angular 中路由导航使用 a 标签
必要属性:[routerLink]="['/ 路由规则地址']"
可选属性: routerLinkActive 来给当前选中的 a 标签设置样式
(2) 编程式导航
第一步: 引入 Router 实例
import { Router } from '@angular/router'
第二步: 实例化 Router
constructor(public router:Router){}
第三步: 编写程序代码进行页面跳转
- toOrder(){
- this.router.navigate(['/order'])
- }
4. 路由嵌套
第一步: 创建几个页面组件 (不要删除 App.module.ts 中自动生成的代码)
第二步: 在路由配置规则文件的一级路由规则中添加 children 属性, children 属性的类型和整体路由规则一样, 都是一个数组, 在数组中再具体的路由配置规则.
第三步: 在一级路由对应的页面组件中, 添加 < router-outlet></router-outlet>
5. 动态路由
第一步: 创建页面组件
第二步: 定义一个动态路由规则 (和 vue 一模一样)/ 关键词 /: 变量名
第三步: 在电影列表页面给指定的标签绑定事件, 进行参数传递和页面跳转
- import { Router } from '@angular/router'
- constructor(public router:Router){}
- toInfo(id){
- this.router.navigate(['/movieinfo/'+id])// 第一种写法
- this.router.navigate(['/movieinfo/',id])// 第二种写法
- }
第四步: 接收动态路由的参数
在电影详情页面组件中的 ts 文件里进行路由模块的引入
- import { ActivatedRoute } from '@angular/router'
- id = ''
- constructor(public routerInfo:ActivatedRoute){
- this.id = this.routeInfo.snapshot.params.id// 第一种获取方式
- this.routeInfo.params.subscribe(res=>{// 第二种获取方式
- this.id = res.id
- })
- }
另一种传参数的形式:
传参数:
<a [routerLink]="['/order']" [queryParams]="{id:100}"> 按钮 </a>
接收参数:
- import { ActivatedRoute } from '@angular/router'
- constructor(public routerInfo: ActivatedRoute) {
- this.routerInfo.snapshot.queryParams.id
- }
四, 组件通信
1. 父子组件
第一步: 定义一个公用子组件, 在不同父组件中使用它
第二步: 在父组件使用子组件时, 通过自定义属性来传递参数
< 子组件名 [自定义变量名]="变量值"></ 子组件名 >
第三步: 在子组件中接收父组件传递的参数
引入 Input 模块
import { Component, OnInit,Input } from '@angular/core';
在子组件的类文件中接收数据
- export class MovieItemComponent implements OnInit {
- @Input() data;// 接收父组件传递的数据
- constructor() {}
- ngOnInit(): void {
- // console.log(this.data)
- }
- }
第四步: 在子组件的 HTML 文件进行数据的遍历
- <div class="list">
- <div class="item" *ngFor="let item of data">
- <img src="{{ item.img }}" alt="">
- <p>{{ item.title }}</p>
- </div>
- </div>
2. 子父组件
第一步: 在父组件中先定义好自定事件和对应的函数, 使用子组件时, 传递自定义事件
< 子组件名 [自定义属性]="属性值" (自定义事件名)="自定义函数 ($event)"
第二步: 在子组件中通过 output 和 eventEmmiter 来触发父组件的自定义事件
- import { Component, OnInit,Input,Output,EventEmitter } from '@angular/core';
- export class MovieItemComponent implements OnInit {
- @Input() data;// 接收父组件传递的数据
- @Output() delByItem:EventEmitter<Number> = new EventEmitter();
- delItem(m){
- this.delByItem.emit(m);
- }
- constructor() {}
- ngOnInit(): void {
- // console.log(this.data)
- }
- }
第三步: 在父组件的自定义事件函数中执行数据的操作
- del(n){
- var idx = this.movies.findIndex(d=>{
- return d.id === n
- });
- this.movies.splice(idx,1)
- }
3. 服务
(1) 创建服务
ng generate service [服务目录 /] 服务名称
可以简写成
ng g s [服务目录 /] 服务名称
(2) 定义数据和方法
服务是一个类, 就可以在类中定义属性和方法
- export class UserService {
- name = 'admin'
- setName(name){
- this.name = name
- }
- constructor() { }
- }
(3) 在普通的组件中使用
在普通组件的 ts 文件中引入创建好的服务
import {UserService} from '../../services/user.service'
在普通组件的 HTML 文件中使用服务中定义好的属性和方法
- <div class="header">
- <h3>XXX 后台管理系统 </h3>
- <p > 欢迎:{{ userService.name }}</p>
- <button (click)="userService.setName('小明')"> 点我改变 </button>
- </div>
五, 网络请求
1. 配置代理
在项目根目录创建一个 JSON 文件, 名字自己设置
此文件中的内容和 vue 的 proxyTable 属性中的内容一样
- {
- "/api":{
- "target":"http://localhost:3000"
- }
- }
在 package.JSON 文件中的 start 选项中使用创建好的代理文件
"start": "ng serve --proxy-config proxy.config.json"
重启项目, NPM start
此时如果再使用 ng serve 来启动项目, 则不会使用代理.
2. 引入 http 模块
App.module.ts 中引入 httpClientModule
- import { HttpClientModule } from '@angular/common/http'
- imports: [// 项目需要使用模块依赖
- BrowserModule,
- AppRoutingModule,
- HttpClientModule
- ]
在需要使用网络请求的页面组件中引入 httpClient 模块
- import {
- HttpClient
- } from '@angular/common/http'
- constructor(public http : HttpClient) {
- }
3. 发起网络请求
- get
- this.http.get('请求地址').subscribe(res=>{
- console.log(res)
- })
- post
- this.http.post('请求地址', 要提交的数据).subscribe(res=>{
- console.log(res)
- })
来源: http://www.jianshu.com/p/ba32827cc16a