Angular2 Form输入中的#name和[（ngModel）] =“name”有什么区别？

Question

我有点困惑，因为一些教程使用＃来获取输入，而有些使用[（ngModel）]

Answer 1

<强> #XXX

#xxx允许您获取元素引用。

<input #inp (change)="foo = inp.value">

侦听更改事件并调用onChange()并传递输入value属性

对于双向绑定，您还需要

<input #inp (change)="foo = inp.value)" [value]="foo = $event">

<强> NgModel

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

使用NgModel指令，该指令允许将DOM输入元素和自定义组件集成到Angular表单功能中。 它也可以在没有表格的情况下使用。 NgModel是对所有类型的元素和组件的抽象，而上面的（#inp）示例仅适用于具有value属性并发出change事件的输入元素。

[(ngModel)]="foo"

是

的缩写形式

[ngModel]="foo" (ngModelChange)="foo = $event"

表示它是双向绑定。

<强>暗示

#xxx返回组件或指令实例，如果该元素不是普通的DOM元素，而是Angular组件或应用了Angular指令。

Answer 2

#name语法是一个引用html对象的模板引用，可以在Angular文档中找到更多信息： Angular template guide

[（ngModel）]正在对元素值设置双向绑定并将其赋值给变量。

Answer 3

<input #inp (change)="foo = inp.value">

收听更改事件并调用onChange()并传递输入值属性

对于双向绑定，您还需要

<input #inp (change)="foo = inp.value)" [value]="foo = $event">

NgModel

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

使用NgModel指令，该指令允许将DOM输入元素和自定义组件集成到Angular表单功能中。也可以不带形式使用。 NgModel是所有元素和组件的抽象，而上面的（#inp）示例仅适用于具有value属性并发出更改事件的输入元素。

[(ngModel)]="foo"

是

的缩写

[ngModel]="foo" (ngModelChange)="foo = $event"

这表明它用于双向绑定。

Answer 4

模板引用变量仅用于访问元素的dom属性。 因此，对于两个绑定或任何更改，我们需要编写
-> 但是通过使用ngmodel绑定可以帮助实现角度两种方式的数据绑定，可以在短时间内通过以下方式完成： ->