数据绑定
- 数据绑定允许将组件控制器的数据和方法与模板连接起来，减少了代码量
- 使用插值表达式将一个表达式的值表示在模板上
{{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);
}
- 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绑定
- 基本的HTML属性绑定
<table><tr>
<td [attr.colspan]="size" ]></td>
</tr></table>
- 优先使用DOM的属性绑定，但是有时候也会使用HTML的数据绑定，这是因为当元素没有DOM属性可以绑定时就必须使用HTML属性绑定
- 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);
}
样式绑定
- 第一个个表达式用来控制 颜色显示，第二个用来控制font-style样式是通过后面的的表达式来决定样式（是italic还是normal）
<div [style.color]="isSpecial?red:green"></div>
<div [ngStyle]="{'font-style':this.canSave?'italic':'normal'}"></div>
- angular 的数据绑定默认为单向绑定
