Angular数据绑定

Angular的数据绑定分为三种：

1. < h1> {{变量名}} </h1>：插值表达式（单向绑定）
2. < img [src]="imgUrl"> :属性绑定
3. <button (click)="toPrduct($event)">: 事件绑定($event是一个事件变量)

下面我们来详细讲解一下：
1、插值表达式很简单，我做一个简单的介绍：
插值表达式是一个dom属性绑定，所有只能绑定dom属性，其他属性不能使用dom属性绑定。
2、属性绑定
2.1、

     < img [src]="imgUrl">
     < img src="{{imgUrl}}">

这两种写法没有任何的区别。
2.2、DOM属性、HTML属性是不一样的，

优先选择DOM属性绑定。
- DOM属性：节点的当前值
- HTML属性：初始化时的值
在ts中获取属性的方法也不一样：

//Dom属性的获取(value属性的获取)
event.target.value；
//HTML属性的获取(value属性的获取)
event.target.getAttribute('value')；

2.3、HTML属性绑定的三大方法

//基本的属性绑定
< img  [attr.属性名]="属性的值">`
//css类绑定
<img class="aa bb" [class]="cc">`
//使用cc来完全替换aa bb
<img  [class.aa]="isSpecial">`
//当isSpecial=ture时，添加class  aa到img上
<img  [ngClass]="{aa:isAA,bb:isBB}">
//样式绑定
<img  [style.color]="isSpecial?red:green">
//是一个表达式形式的这个值，当isSpecial=ture时，为red,反之为：green
<img  [ngStyle]="{'color':this.isSpecial?'red':'gren'}">
//也是一个表达式：当isSpecial=ture时，为red,反之为：green

3、双向绑定

<input  [(ngModel)]="name">`

双向绑定需要在主模块添加：FormsMudule 模块