数据绑定

1. 数据绑定允许将组件控制器的数据和方法与模板连接起来，减少了代码量

• 使用插值表达式将一个表达式的值表示在模板上

{{msg}}

• 使用方括号将HTML的标签的属性绑定到一个表达式上，DOM属性绑定

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

imgurl: string = 'http://placehold.it/400x220';

• 使用（）将组件控制器的一个方法绑定为一个事件的处理器，事件绑定

<button (click)="doOnClick($event)">click</button>

doOnClick($event: any) {
  console.log(event);
}

2. DOM和HTML属性的不同，DOM是随着输入的值变化的，而HTML获取的是初始化的数据，是不会随着输出改变的，少量的HTML属性和DOM属性有1:1映射（id），有些HTML属性没有DOM属性（colspan），有些DOM属性没有HTML属性（textContent）

<input (input)="doOnInput($event)" value="Tom">

doOnInput($event: any) {
  console.log(event.target.value);
  console.log(event.target.getAttribute('value'));
}

---

HTML绑定

1. 基本的HTML属性绑定

<table><tr>
  <td [attr.colspan]="size" ]></td>
</tr></table>

• 优先使用DOM的属性绑定，但是有时候也会使用HTML的数据绑定，这是因为当元素没有DOM属性可以绑定时就必须使用HTML属性绑定

2. css类绑定
   绑定的class类会完全替代其他类，第二种是class加上一个样式的绑定，后面这个表达式是一个布尔值，当值为true的时候这个div上才会出现这个class，反之则没有，第三种是ngClass绑定，通过表达式来控制多个类是否显示

<div class="abc" [class]="someExpression">something</div>

<div [class.special]="isSpecial">something</div>

<div [ngClass]="{a:isa,b:isb}"></div>

• 三秒钟后显示abc三个类中的 所有样式

<div [class]="divClass"></div>

divClass: string;
constructor() {
  setTimeOut(() => {
      this.class = "a b c";
    }

    , 3000);
}

• 在显示ab两个类的样式时，通过isBig来判断是否显示再c类的样式，控制单一属性样式显示

<div class="a b" [class.c]="isBig"></div>

• 使用ngClass指令同时管理多个类名，效果为从无任何样式在三秒后变为同时具备三个类的样式

<div [ngClass]="divClass2"></div>

divClass2: any= {
  a: false,
  b: false,
  c: false
};
isBig: boolean = false;
constructor() {
  setTimeOut(() => {
      this.divClass2 =true;
    }, 3000);
}

---

样式绑定

1. 第一个个表达式用来控制 颜色显示，第二个用来控制font-style样式是通过后面的的表达式来决定样式（是italic还是normal）

<div [style.color]="isSpecial?red:green"></div>
<div [ngStyle]="{'font-style':this.canSave?'italic':'normal'}"></div>

2. angular 的数据绑定默认为单向绑定