angular - Angular2 表单输入中的 #name 和 [(ngModel)] ="name"有什么区别？

Question

我有点困惑，有些教程使用 # 获取输入，而有些使用 [(ngModel)]。两者的有效区别是什么？

Answer 1

#xxx

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

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

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

对于双向绑定(bind)你还需要

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

NgModel

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

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

[(ngModel)]="foo"

是

的缩写形式

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

这表明它是双向绑定(bind)的。

提示

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