理解angular2.0双向数据绑定中的 $event

app/hero-form.component.html (excerpt)

COPY CODE

<input type="text" class="form-control" id="name"
       required
       [ngModel]="model.name" name="name"
       (ngModelChange)="model.name = $event" >
  TODO: remove this: {{model.name}}

这个属性绑定看起来很眼熟，但事件绑定看起来有点怪。

ngModelChange并不是<input>元素的事件。 它实际上是来自NgModel指令的事件属性。 当 Angular 在表单中看到[(x)]的绑定目标时， 它会期待这个x指令有一个名为x的输入属性，和一个名为xChange的输出属性。

模板表达式中的另一个古怪之处是model.name = $event。 之前看到的$event对象来自 DOM 事件。 但ngModelChange属性不会生成 DOM 事件 —— 它是Angular EventEmitter类型的属性，当它触发时， 它返回的是输入框的值 —— 也正是希望赋给模型name属性的值。

很高兴知道这些，但是这样现实吗？实践上中，几乎总是优先使用[(ngModel)]形式的双向绑定。 只有当需要在事件处理函数中做一些特别的事情（例如合并或限制按键频率）时，才会拆分出独立的事件处理函数