时间戳

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

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

问题描述

在开发 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.Ng模型 

<!-- 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 Banana 语法方法：行不通<input ([value])="cVar">。因为value不是 angular 指令，而 ngModel 是属于 FormsModule 的指令。

  • NgModel是对各种元素和组件的抽象。
  • Whiletemplate 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

推荐阅读