1、简单的事件绑定

事件绑定 用于响应宿主元素发送的事件，即从模板中的元素流向应用程序的其余部分，并能够进行用户交互

<div>
  selected name: {{selectedName || 'None'}}
</div>
<table class="form">
  <tr>
    <th>序号</th>
    <th>名称</th>
    <th>年龄</th>
  </tr>
  <tr *ngFor="let item of dataSources; let idx = index;"
    (mouseover)="selectedName=item.name"
  >
    <td>{{idx + 1}}</td>
    <td >{{item.name}}</td>
    <td>{{item.age}}</td>
  </tr>
</table>

与单向绑定不同的是，事件绑定中的表达式可更改应用程序的状态，并且可以包含赋值操作符

2、使用事件数据

selected name: {{selectedName || 'None'}}
<div >
  <label>Name:</label>
  <input (input)="selectedName=$event.target.value"/>
</div>

$event 是一个模板变量，等于事件对象，可以访问target属性

3、使用模板引用变量

模板引用变量 是模板变量的一种形式，可用于引用模板中的元素。

selected name: {{template.value || 'None'}}
<table class="form">
  <tr>
    <th>序号</th>
    <th>名称</th>
    <th>年龄</th>
  </tr>
  <tr *ngFor="let item of dataSources; let idx = index;  let odd=odd;"
    [ngClass]="{'tr-odd': odd}"
    (mouseover)="template.value=item.name"
  >
    <td>{{idx + 1}}</td>
    <td >{{item.name}}</td>
    <td>{{item.age}}</td>
  </tr>
</table>

<div >
  <label>Name:</label>
  <input (input)="false" #template/>
</div>

1. 上述#template指向input元素，即HTMLInputElemnet对象。同一模板中其他绑定可以使用这个引用变量
2. 当用户编辑input元素的内容时，除非该元素上有事件绑定，否则Angular不会更新模板中的数据绑定。所以设置(input)="false"
3. 模板引用变量的这种用法偏离设计初衷，不推荐使用

4、使用双向数据绑定

selected name: {{selectedName || 'None'}}

<table class="form">
  <tr>
    <th>序号</th>
    <th>名称</th>
    <th>年龄</th>
  </tr>
  <tr *ngFor="let item of dataSources; let idx = index;"
    [ngClass]="{'tr-odd': selectedName==item.name}"
    (mouseover)="selectedName=item.name"
  >
    <td>{{idx + 1}}</td>
    <td >{{item.name}}</td>
    <td>{{item.age}}</td>
  </tr>
</table>

<div >
  <label>Name3:</label>
  <input (input)="selectedName=$event.target.value" [value]="selectedName" />
</div>

事件绑定和属性绑定同时应用于input上，HTML文档 <-------> 应用程序模型

5、使用ngModel

ngModel指令简化双向绑定，因此不必将事件绑定和属性绑定应用于同一个元素。

...
<div>
  <label>Name4:</label>
  <input [(ngModel)]="selectedName" />
</div>
...

ngModel指令知道标准HTML元素定义的事件和属性组合。在幕后，有个事件绑定被应用于input事件，还有一个属性绑定被应用于value属性。