在开发Angular应用程序时,要实现双向绑定,使用[(ngModel)]方法(如下所示)优于以下3种方法(也在下面列出)中有什么优势 . 此外,其中,哪一个 . 是实现双向数据绑定的最佳选择(无论是构建表单还是一般(非形式)用例场景)?
[(ngModel)] approach:
<input [(ngModel)]="varName">
<--OR-->
<input [ngModel]="varName" (ngModelChange)="SomeFunction($event.target.value)">
1. Input/event binding as follows:
<input [value]="aVar" (input)="aVar=$event.target.value" >
{{aVar}}
2. Template variable as follows:
<input [value]="bVar" (input)="bVar=ipx.value" #ipx>
{{bVar}}
3. Banana syntax approach:
<input ([value])="cVar">
{{cVar}}
1 回答
1. NgModel
2. Property Binding
3. #ipx 调用作为元素引用,它将为您提供元素引用 .
NgModel
是对各种元素和组件的抽象 .虽然
template reference (#ipx)
仅适用于具有value属性并发出change事件的输入元素 .[value]="aVar"
是属性绑定 . 我们使用表达式名称绑定input元素的value属性 . (输入)= "expression"是事件绑定 . 每当触发输入事件时,将执行表达式 .[(ngModel)]="varName"
是[ngModel]="varName" (ngModelChange)="varName = $event"
的缩写形式使用NgModel指令,该指令允许您将DOM输入元素和自定义组件集成到Angular表单功能中 .
Conclusion :
我们可以得出结论,指令ngModel只是属性绑定和事件绑定的组合 .
Event binding is denoted using small bracket
和property binding is denoted using square [] bracket
,如果您注意到syntax of ngModel is [(ngModel)], which is like a banana
放入框中,则表明它是事件和属性绑定的组合 .参考Stackblitz