Angular 数据绑定

Angular 数据绑定，一种让模板的各部分与组件的各部分相互合作的机制。
数据绑定的语法有四种形式。每种形式都有一个方向 —— 绑定到 DOM 、绑定自 DOM 以及双向绑定。

<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>

• {{hero.name}}插值表达式在标签中显示组件的hero.name属性的值。
• [hero]属性绑定把父组件HeroListComponent的selectedHero的值传到子组件HeroDetailComponent的hero属性中。
• (click) 事件绑定在用户点击英雄的名字时调用组件的selectHero方法。

• 双向数据绑定是重要的第四种绑定形式，它使用ngModel指令组合了属性绑定和事件绑定的功能。

  下面是HeroDetailComponent模板的范例：

<input [(ngModel)]="hero.name">

在双向绑定中，数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值。