angular第二天学习
内容：Angular表单、数据类型、路由、组件通信和网络请求
一、表单
1.引入表单模块
在/src/app/app.module.ts文件中增加表单模块的引入
import { FormsModule } from '@angular/forms'
//挂载到整个项目中
imports: [
BrowserModule,FormsModule
]
2.使用
在页面组件的ts文件中先定义好变量
在页面组件的html文件中通过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，把原有内容都删除，添加一个路由出口标签
2.子父组件
第一步：在父组件中先定义好自定事件和对应的函数，使用子组件时，传递自定义事件
<子组件名 [自定义属性]=“属性值” (自定义事件名)="自定义函数($event)"
第二步：在子组件中通过output和eventEmmiter来触发父组件的自定义事件
import { Component, OnInit,Input,Output,EventEmitter } from '@angular/core';
export class MovieItemComponent implements OnInit {
@Input() data;//接收父组件传递的数据
@Output() delByItem:EventEmitter = 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文件中使用服务中定义好的属性和方法
五、网络请求
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)
})
{{ item.title }}
XXX后台管理系统
欢迎：{{ userService.name }}
发表评论 (审核通过后显示评论)：