内容：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)
})
网友评论