数据绑定可以将组件、控制器的属性和方法，和组件的模版连接起来，大大降低了开发时的编码量。例如：

6.jpg

<1>事件绑定

例如：

7.jpg
1.新建一个项目

ng new dataPro

2.新建一个组件

ng g component bind

3.修改bind组件模版 -- bind.component.html

<p>
  bind works!
</p>
<!-- $event 是把当前点击的事件传过去 -->
<button (click)="doOnClick($event)">事件绑定</button>

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

<h3>事件绑定测试</h3>
<app-bind></app-bind>

6.结果

8.jpg
点击后，控制台中输出
9.jpg

<2>dom属性绑定

12.jpg
插值表达式其实就是dom属性绑定
1.修改bing.component.html

<p>
  bind works!
</p>
<!-- 写法一:用[]的方式把属性括起来，通过控制器的imgUrl来给src赋值 -->
<img [src]="imgUrl"><br><br>

<!-- 写法二:用插值表达式来写 -->
<img src="{{imgUrl}}">

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

<p>
  bind works!
</p>
<!-- input标签的value属性设为了tom -->
<input type="text" value="tom" (input)="doOnInput($event)">

(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的内容时，控制台中打印出

10.jpg
(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属性绑定

//模版中
<table>
   <tr>
       <!-- 属性前面加attr前缀，值为后台传来的size变量 -->
       <td [attr.colspan]="size">基本html属性绑定</td>
   </tr>
</table>

//控制器中声明变量
size:number = 2;

11.jpg

2.CSS类绑定
(1)class全替换

//模版中
<div [class]="divClass">css类属性绑定</div>

//控制器中
// 一开始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

//模版中 
<!-- a,b为固定的,c为通过后台isBig(boolean)的值来确定是否加上去 -->
<div class="a b" [class.c]="isBig">css类属性绑定</div>

//控制器中
   //刚开始为false,即不加上c
   isBig:boolean = false;
   constructor() {
       // 3秒后加上c
       setTimeout(()=>{
           this.isBig = true;
       },3000)
   }

(3)切换多个class

//模版中
<!-- ngClass需要一个key:value的对象 -->
<!--key是类名，value为boolean，为true则添加对应的key到calss中-->
<div [ngClass]="divClass">css类属性绑定</div>

//控制器中
  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

//模版中
<!-- 当isDev为true,则color为red,反之为blue -->
<div [style.color] = "isDev?'red':'blue'">style样式绑定</div>

//控制器中
isDev:boolean = true;

(2)当属性带有单位时

//模版中
<!-- .px即为font-size的单位 -->
<div [style.fone-size.px] = "isDev?14:16">style样式绑定定</div>

(3)设置多个style

//模版中
<div [ngStyle] = "divStyle">css类属性绑定</div>
//控制器中
divStyle:any = {
    color: 'red',
    background:'yellow'
};
   constructor() {
         //3秒后修改样式
         setTimeout(()=>{
             this.divStyle = {
             color: 'yellow',
             background:'red'
             };
      },3000)
}

<4>双向绑定

双向绑定可以使视图和模型保持一致，无论哪一方进行改变，另一方都能立即同步。

//模版中
//ngModel仅适用于文本，文本框等既能修改，又能显示的标签
//下面代码的作用:当模版中输入框内容改变时，控制器中属性name的值同时改变。
<input [(ngModel)]="name" name="test"> <br>
{{name}}
等同于：
<input [value]="name" (input)="doOnInput($event)"><br>
{{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

13.jpg

<5>响应式编程

1.rxjs
响应式编程主要是通过观察者模式实现，在Angular中的Rxjs即是它的具体实现。
2.模版变量
模板变量是在html标签上使用#开头来定义的变量，它代表html元素本身。

//模版中
<input (keyup)="onKeyUp($event)">
<input #iValue (keyup)="onKeyUp(iValue.value)">
//控制器
 onKeyUp(param: any) {
   let iInput;
   try {
     iInput = param.target.value;
   } catch (e) {
     iInput = param;
   }
   console.log(iInput);
 }

<6>管道

常用管道：
（1）date：

14.png 15.png

（2）uppercase：字母大写

（3）lowercase：字母小写

（4）number：数字格式化

16.png

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.修改模版

<p>自定义管道测试{{size | multiple :'5'}}</p>

5.结果

17.png