首页 文章

使用ngModel优于输入/事件绑定,模板变量绑定和使用香蕉语法 - 双向绑定的方法有什么优势

提问于
浏览
2

在开发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

    1. NgModel

    <!-- Will not work should replace with below No One -->
    <input [ngModel]="varName" (ngModelChange)="SomeFunction($event.target.value)">
    
    <!-- One -->
    <input [ngModel]="varName" (ngModelChange)="varName = $event">
    

    2. Property Binding

    <input [value]="aVar" (input)="aVar=$event.target.value" >
    

    3. #ipx 调用作为元素引用,它将为您提供元素引用 .

    No 4 Banana语法方法:无法正常工作<input([value])=“cVar”> . 因为value不是angular指令,而ngModel是一个属于FormsModule的指令

    • 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 bracketproperty binding is denoted using square [] bracket ,如果您注意到 syntax of ngModel is [(ngModel)], which is like a banana 放入框中,则表明它是事件和属性绑定的组合 .

    参考Stackblitz

相关问题