В чем разница между #name и [(ngModel)] = "name" в Angular2 вводом формы?

Ответ 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.

Ответ 2

СинтаксиС#name является ссылкой на шаблон, который ссылается на html-объект, дополнительную информацию можно найти в Angular docs: Руководство по угловым шаблонам

[(NgModel)] устанавливает двухстороннюю привязку к значению элементов и присваивает его переменной.

Ответ 3

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

прослушивает событие изменения и вызывает onChange() и передает свойство входных значений

Для двусторонней привязки вам также понадобится

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

NgModel

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

использует директиву NgModel, которая позволяет интегрировать элементы ввода DOM и пользовательские компоненты в функциональность угловой формы. Он также может быть использован без формы. NgModel является абстракцией для всех видов элементов и компонентов, в то время как приведенный выше пример (#inp) работает только для входных элементов, которые имеют свойство value и генерируют событие change.

[(ngModel)]="foo"

это краткая форма

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

который показывает, что это для двусторонней привязки.