使用 ngModel 与输入/事件绑定、模板变量绑定和使用香蕉语法相比有什么优势 - 2 路绑定的方法答案

【问题标题】：What is the advantage of using ngModel over input/event binding, template variable binding and using banana syntax - approaches for 2-way binding使用 ngModel 与输入/事件绑定、模板变量绑定和使用香蕉语法相比有什么优势 - 2 路绑定的方法
【发布时间】：2018-11-02 08:06:07
【问题描述】：

在开发 Angular 应用程序时，要实现 2-way binding，使用 [(ngModel)] 方法（如下所示）相对于以下 3 种方法（也在下面列出）有什么优势。此外，其中包括以下内容。是实现 2 路数据绑定的最佳选择（无论是构建表单还是一般（非表单）用例场景）？

[(ngModel)] 方法：

<input [(ngModel)]="varName">

<--OR-->

<input [ngModel]="varName" (ngModelChange)="SomeFunction($event.target.value)">

1.输入/事件绑定如下：

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

2。模板变量如下：

    <input [value]="bVar" (input)="bVar=ipx.value" #ipx>
{{bVar}}

3.香蕉语法做法：

 <input ([value])="cVar">
{{cVar}}

【问题讨论】：

标签： angular

【解决方案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。属性绑定

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

3. #ipx 作为元素引用调用，它会给你元素引用。

No 4 香蕉语法方法： 不起作用<input ([value])="cVar">。因为value不是angular指令，而ngModel是属于FormsModule的指令。`

NgModel 是对各种元素和组件的抽象。
虽然template reference (#ipx) 仅适用于具有 value 属性并发出更改事件的输入元素。
[value]="aVar" 是属性绑定。我们将输入元素的值属性与表达式名称绑定。 (input)="expression" 是事件绑定。只要输入事件被触发，表达式就会被执行。
[(ngModel)]="varName" 是[ngModel]="varName" (ngModelChange)="varName = $event" 的简写形式
使用 NgModel 指令将允许您将 DOM 输入元素和自定义组件集成到 Angular 表单功能中。

结论：

我们可以得出结论，指令 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

【讨论】：