В чем разница между префиксом ref и # в переменной ссылки шаблона (Angular 2)

Я хочу понять разницу между обозначениями ссылочных переменных шаблона, как указано ниже в полях ввода текста.

<input type="text" name='name' #name [(ngModel)]='model'>
<input type="text" name='name' ref-name [(ngModel)]='model'>

В чем разница между использованием #name и ref-name.
Изменяется ли область действия переменной при использовании ref-name ?
Может ли кто-нибудь предложить наилучшую практику и причину ?

3 4
typescript angular2-template angular2-forms

3 ответа:

Это два разных синтаксиса для буквально одного и того же.

Вы можете думать об этом так: некоторым людям (и редакторам) не нравится новый синтаксис "#variable", поэтому Angular предоставляет возможность использовать точно такую же функциональность, используя более "приятный" синтаксис.

5

Template reference variable is a variable using which we can access DOM properties.

Используя ссылочную переменную шаблона, мы получаем доступ к значениям свойств элемента DOM. Ссылочная переменная шаблона объявляется с помощью # и ref-в качестве префикса, например, #item и ref-item.

Пример: ссылочная переменная шаблона с использованием входного текстового поля 

<input type="text" #name placeholder="Enter your name" />

Здесь #name - ссылочная переменная шаблона, чтобы получить свойства DOM, мы следуем

name.placeholder это дает "заполнитель нашего текстового поля", если мы указали.

name.value это дает нам "ценность" наше текстовое поле.

name.type это дает нам "тип" нашего текстового поля.

Вот мой пример, который я создал.

HTML-страница

моя html-страница

Вывод

выход

Вы можете сделать то же самое с ref-name опорная переменная.

1

Ссылочная переменная шаблона-это переменная, с помощью которой мы можем получить доступ к свойствам DOM. Ссылочная переменная ссылается на присоединенный к ней элемент, компонент или директиву. Он может быть доступен в любом месте всего шаблона.

<input type="text" name='name' #name [(ngModel)]='model'>

#name объявляет переменную name для элемента. Ссылка #... теперь всегда означает ref-. Используйте # или ref-вне *ngFor. И вы можете сослаться на следующий URL: http://www.concretepage.com/angular-2/angular-2-template-reference-variable-example

0