Я немного смущен, потому что для некоторого учебника используйте # для получения ввода, в то время как некоторые используют [(ngModel)]
В чем разница между #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"
который показывает, что это для двусторонней привязки.