[(ngModel)] 如何与 Angular 2 中的单向数据流一起工作答案

【问题标题】：How does [(ngModel)] works with Unidirectional data flow in Angular 2[(ngModel)] 如何与 Angular 2 中的单向数据流一起工作
【发布时间】：2016-09-30 01:02:57
【问题描述】：

Angular 2 支持单向数据流，一次一种方式。 Angular2 中的双向数据绑定 [(ngModel)] 是如何工作的？

【问题讨论】：

标签： angular 2-way-object-databinding

【解决方案1】：

Angular2 将 [(ngModel)] = myName 理解为 property + event 绑定和折叠版本，

[ngModel] = 'myName'，和
(ngModelChange) = 'updateMyNameValue(myName)'

他们的unidirectional data flow 策略也可以采用它的扩展版本，例如在值更改时通过inputs 事件显式设置范围变量，反之亦然，因此它的这个语法糖版本可能看起来差不多

myName = '';
function updateMyNameValue(elem) {
   // find scope variable of `myName` and update it
   // find element in view and update it
}
// <input type="text" onchange="updateMyNameValue(this)" value="" />

根据docs，

[(ngModel)] 是更通用模式的一个具体示例，其中 Angular 将[(x)] 语法“脱糖”为x 输入属性属性绑定和用于事件绑定的xChange 输出属性。 Angular 通过以下方式构造事件属性绑定的模板语句将=$event 附加到模板表达式的文字字符串中。
[(x)]="e" <==> [x]="e" (xChange)="e=$event"

【讨论】：

那么，事件处理程序在哪里实现？在组件内部？
@Shivanka 不，他们有自己的方式为每个表单控件（例如inputs, selects, multiple selects, etc..）在他们的指令中实现事件处理程序。
在我想以两种方式数据绑定覆盖事件处理程序的情况下，我该如何实现这样的功能。
@Shivanka 您可以通过设置(ngModelChange) 显式设置事件处理程序。如果您仍然不清楚我在说什么，请尝试单击我提供的文档链接。它可能会有所帮助。