В чем разница между ссылочной переменной шаблона (#) и [(ngModel)]?

Question

Я читаю учебные пособия и документацию, и я не понял концепцию Template reference variables. У нас есть NgModel для двухсторонней привязки, но почему мы используем Template reference variables в Angular?

Answer 1

Оба они являются способами коммуникации в Angular.

Ngmodel обычно используется для связи между входами шаблона (односторонним или двухсторонним).

<input class="input-box" ([NgModel])]="value">

ViewChild или ViewChildren обычно используется для связи с пользовательскими компонентами. Вы также можете использовать нативные элементы с ViewChild, если вам нужно было использовать jQuery или внешнюю библиотеку для фактической ссылки на нативный элемент (реализация stripe использует это для нативных элементов). Вы также часто будете сталкиваться с этим в angular библиотеках, таких как ng- bootstrap или angular материал, который будет использовать эти ссылки на шаблоны для связывания компонентов.

<custom-component #ref></custom-component>

Тогда в вашем контроллере вы можете определить.

@ViewChild('ref')public customComponent; 

      or

@ViewChild('nativeRef')public component: ElementRef; 

Answer 2

[(ngModel)] - это двусторонняя привязка данных, любые изменения данных во внешнем интерфейсе или бэкэнде будут отражаться в обеих частях в зависимости от того, как вы их вызываете и когда. Согласно операторам потока управления и вызовам функций.

переменная ссылки на шаблон (#) - это переменная, которая может использоваться в любом месте страницы для ссылки на другие элементы DOM для ее значения.