数据绑定可以将组件、控制器的属性和方法，和组件的模版连接起来，大大降低了开发时的编码量。例如：
<1>事件绑定
例如：
1.新建一个项目
ng new dataPro
2.新建一个组件
ng g component bind
3.修改bind组件模版 -- bind.component.html
bind works!
4.修改bind组件控制器 -- bind.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-bind',
templateUrl: './bind.component.html',
styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
constructor() { }
ngOnInit() {
}
// 1.写一个doOnClick()方法
// 2.接收一个任意属性的事件 event:any
doOnClick(event:any) {
console.log(event);
}
}
5.将组件添加到app组件中 -- app.component.html
事件绑定测试
6.结果
点击后，控制台中输出
<2>dom属性绑定
插值表达式其实就是dom属性绑定
1.修改bing.component.html
bind works!
![]()
2.控制器中定义imgUrl -- bind.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-bind',
templateUrl: './bind.component.html',
styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
// 定义imgUrl
imgUrl:string = "http://placehold.it/400x200";
constructor() { }
ngOnInit() {
}
}
【html属性和dom属性的区别
(1)修改bind模版 -- bind.component.html
bind works!
(2)修改bind.component.ts
doOnInput(event:any) {
// 1.输出dom属性
console.log("dom属性："+event.target.value);
//2.输出html属性
console.log("html属性："+event.target.getAttribute("value"));
}
(4)结果
当修改input的内容时，控制台中打印出
(5)总结
1. HTML属性的值指定了初始值；在这里一开始设置了value=“tom”，所以它一直都是tom，如果一开始没有设置value的值，那么它就一直为null;
DOM属性的值表示当前值。DOM属性的值可以改变；当表单的value属性变化时，它的值也跟着变化；
2. 模版绑定是通过DOM属性和事件来工作的，而不是HTML属性
3.少量HTML属性和DOM属性之间具有1：1的映射，如id
4. 有些HTML属性没有对应的DOM属性，如colspan
5. 有些DOM属性没有对应的HTML属性，如textContent
6. 就算名字相同，HTML属性和DOM属性也不是同一样东西
】
<3>html属性绑定
1.基本html属性绑定
//模版中
基本html属性绑定
//控制器中声明变量
size:number = 2;
2.CSS类绑定
(1)class全替换
//模版中
css类属性绑定
//控制器中
// 一开始divClass的值为空
divClass:string;
constructor() {
// 设置定时函数，将divClass设为a,b,c
// css文件中定义了a为黄背景，b为红字，c为60px字体大小
//最后效果是3秒后会将a,b,c赋值给class
setTimeout(()=>{
this.divClass = 'a b c';
},3000)
}
(2)部分class固定，切换单一class
//模版中
css类属性绑定
//控制器中
//刚开始为false,即不加上c
isBig:boolean = false;
constructor() {
// 3秒后加上c
setTimeout(()=>{
this.isBig = true;
},3000)
}
(3)切换多个class
//模版中
css类属性绑定
//控制器中
divClass:any = {
a:false,
b:false,
c:false
}
constructor() {
//3秒后设为true
setTimeout(()=>{
this.divClass = {
a:true,
b:true,
c:true
}
},3000)
}
3.style样式绑定
(1)单个style
//模版中
style样式绑定
//控制器中
isDev:boolean = true;
(2)当属性带有单位时
//模版中
style样式绑定定
(3)设置多个style
//模版中
css类属性绑定
//控制器中
divStyle:any = {
color: 'red',
background:'yellow'
};
constructor() {
//3秒后修改样式
setTimeout(()=>{
this.divStyle = {
color: 'yellow',
background:'red'
};
},3000)
}
<4>双向绑定
双向绑定可以使视图和模型保持一致，无论哪一方进行改变，另一方都能立即同步。
//模版中
//ngModel仅适用于文本，文本框等既能修改，又能显示的标签
//下面代码的作用:当模版中输入框内容改变时，控制器中属性name的值同时改变。
{{name}}
等同于：
{{name}}
//控制器中
export class BindComponent implements OnInit {
//1.定义变量name
name:string;
constructor() {
//2.三秒后将tom赋值给name
setInterval(()=> {
this.name="tom";
},3000)
}
ngOnInit() {
}
// 3.doOnInput把变量name改成当前input的value属性的值
doOnInput(event) {
this.name = event.target.value;
}
}
ps:若报错
Can't bind to 'ngModel' since it isn't a known property of 'input'
报错原因 ：app.module.ts中没有import FormsModule
解决方式：在app.module.ts中引入FormsModule
<5>响应式编程
1.rxjs
响应式编程主要是通过观察者模式实现，在Angular中的Rxjs即是它的具体实现。
2.模版变量
模板变量是在html标签上使用#开头来定义的变量，它代表html元素本身。
//模版中
//控制器
onKeyUp(param: any) {
let iInput;
try {
iInput = param.target.value;
} catch (e) {
iInput = param;
}
console.log(iInput);
}
<6>管道
常用管道：
（1）date：
（2）uppercase：字母大写
（3）lowercase：字母小写
（4）number：数字格式化
2：表示两位整数
2-2：表示两位小数，其中前面的2表示最少显示2位，后面的2表示最 多显示2位，超出部分四舍五入，不足部分补0
（5）async：异步管道，用来处理异步的流
（6）自定义管道
1.生成管道
ng g pipe pipeflie/multiple
ps:管道和组件一样，需要声明在app.module.js里的declarations里面
2.修改multiple.pepe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'multiple'
})
export class MultiplePipe implements PipeTransform {
transform(value: number, args?: number): any {
if(!args){
args = 1;
}
return value * args;//返回乘积
}
}
3.定义变量
size:number = 2;
4.修改模版
自定义管道测试{{size | multiple :'5'}}
5.结果