[（ngModel）]如何与Angular 2中的单向数据流一起使用 [英] How does [(ngModel)] works with Unidirectional data flow in Angular 2

问题描述

Angular 2支持一次单向数据流。双向数据绑定[（ngModel）]在Angular2中如何工作？

Angular 2 supports unidirectional data flow, one way at a time. How does two way data binding [(ngModel)] works in Angular2 ?

推荐答案

Angular2理解 [（ ngModel）] = myName 作为属性+事件绑定，并作为折叠版本，

Angular2 comprehends [(ngModel)] = myName as a property + event binding and as a collapsed version of,

1. [ngModel] ='myName'和


2. （ ngModelChange）='updateMyNameValue（myName）'

1. [ngModel] = 'myName', and
2. (ngModelChange) = 'updateMyNameValue(myName)'

它们的单向数据流策略可能会采用它的扩展版本，例如更改值时通过 inputs 事件显式设置范围变量，反之亦然，因此它的语法糖版本可能看起来就像

Their unidirectional data flow policy might as well as take the expanded version of it such as setting the scope variable explicitly by the inputs event when the value is changed and vice-versa, so as this syntactic sugar version of it might look almost like

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="" />

根据文档，

[ （ngModel）] 是更通用模式的具体示例，其中
Angular去糖 [（x）] 语法，将 x 输入属性用于
属性绑定，将 xChange 输出属性用于事件绑定。
Angular通过
在模板表达式的文字字符串后附加 = $ event 来构造事件属性绑定的模板语句。

[(ngModel)] is a specific example of a more general pattern in which Angular "de-sugars" the [(x)] syntax into an x input property for property binding and an xChange output property for event binding. Angular constructs the event property binding's template statement by appending =$event to the literal string of the template expression.

[(x)]="e" <==> [x]="e" (xChange)="e=$event"

这篇关于[（ngModel）]如何与Angular 2中的单向数据流一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！