今天要跟大家分享的是angular2模板中涉及到的数据绑定，Angular提供了多种数据绑定方式，可以根据数据流动的方向分为三种，详见下文：
1) 单向：从数据源到视图目标(属性绑定)，插值DOM元素属性绑定，HTML标签特性绑定
2) 单向： 从视图目标到数据源(事件绑定)
3) 双向绑定
上面介绍了系统的分类，下面将具体介绍详细的绑定方式
1.插值绑定(使用双大括号{{ }}的语法)
实现方式：
<div>手机号码：</div><div>{{detail.telNum}}</div>
当然表达式也可以调用宿主组件的函数，例如：
<div>{{detail.getName()}}</div>
2.属性绑定(使用[])
这里详细的说一下，在属性绑定中，"="左侧中括号的作用是让Angular执行"="右侧的模板表达式，并将结果赋值给该目标属性。如果没有中括号，Angular就会把"="右侧的模板表达式当做一个字符串常量，而不会计算该字符串，所以如果是赋值给该目标属性的值是一个字符串，中括号可以省略。
(1)DOM元素属性绑定
1)实现方式：<img [src]="srcUrl">
这样就可以将img标签的src属性设置为组件中的srcUrl值。但是使用[]只能绑定在DOM元素已有的属性上，例如<div [src]="srcUr"></div>是会报错的，以为div不存在src属性。
2)设置Angular指令的属性
<div [ngStyle]="styles"></div>
3)还可以使用属性绑定设置自定义组件的输入属性(这是父子组件间通讯的重要途径，详情可以见上篇组件交互的文章)，示例代码如下：
<user-detail [user]="currentUser"></user-detail>
(2) css类绑定
1)<div class="red font14" [class]="changeGreen"></div>
2)<div class="red font14" [class.className]="isBlue()">>
这两者的区别分别是，第一种当DOM对象属性绑定给[class]绑定值时，changeCreen会覆盖这个div元素的全部class。第二种当isBlue()返回值为true时，className这个类添加到该绑定的标签上，否则移除这个类
(3)Style样式绑定
HTML标签内联样式可以通过Style样式绑定的方式来设置。样式属性可以使用烤肉串命名法(font-size),也可以使用驼峰式(fontSize)命名。
<div [style.background-color]="canClick ? 'blue' :'grey' "]></div>
<div [style.font-size.px]="isLarge ? 18 : 13 "></div>
3.事件绑定
事件绑定也是一种单向数据绑定方式，数据从模板流向组件类。
<div class="edit" (click)="editContact()"></div>
用事件绑定来监听按钮的点击事件，只要触发点击事件，就会调用editContact()方法。其中还有键盘事件，鼠标事件，触屏事件等来执行其对应绑定的方法。
当然，也可以通过@Output在我们的组件中添加自定义事件，@Output顾名思义就是在子组件中向父组件输出东西(这里就不细讲了，想了解的朋友可以看看组件交互那一块)。
4.双向绑定
Angular2是通过[()]来实现的，例如<input [(ngModel)]="value">就是双向绑定input元素的值。但是需要注意的是[()]只能绑定在有输入输出功能的DOM元素上(例如：input、textare)，如果绑定在div这样的元素上就会报错。
那么，如何通过[()]在我们自定义的指令上实现双向绑定呢？没错，就是使用@Input和@Output来实现。
//父组件
@Component({
selector: 'my-app',
template:
`<customer-counter [(counter)] = "someValue"></customer-counter>
<p> value: {{someValue}}</p>`,
directives:[CustomerCounterComponent] })
export class AppComponent{
someValue = 3;
}
//子组件
@Component({
selector: 'customer-counter',
template: `
<button (click)="decrement()">-</button>
<span>{{counter}}</span>`
})
export class CustomerCounterComponent{
counterValue = 0;
@Input()
get counter(){
return this.counterValue;
}
@Output()
counterChange = new EventEmitter();
set counter(val) {
this.counterValue = val;
this.counterChange.emit(this.counterValue);
}
decrement() { this.counter--; } }
这样<customer-counter [(counter)] = "someValue"></customer-counter >就可以将父组件中的someValue绑定到子组件的counter属性上，同时当子组件的counter属性发生改变时也更新父组件的someValue值。
需要注意的是，我们定义的事件监听是counterChange，而使用的确实[(counter)]。这是因为Angular 2中约定添加后缀Change，也就是[(counter)]等价于[change]和(counterChange)的组合。如果去看[(ngModel)]的实现，你也会发现它是[ngModel]和[ngModelChange]的组合。
今天更新就到这里，谢谢
