В чем смысл # внутри входного тега?

Question

Я просматриваю статью с угловым2, где они используют <input type='text' #hobby>. С помощью #hobby они извлекают значение, которое набирается внутри текстового поля вместо ngModal. Я не понимаю, что это означает #hobby.

Answer 1

# Внутренний ввод указывает, что вы имеете дело с локальной переменной. Свойство Angular2 для определения локальной переменной в HTML. # будет работать за сценой и обновляет вашу переменную с соответствующим значением.

<input type='text' #hobby> 

Здесь hobby относится к локальной переменной, как она определена с # символа. Если вы наберете в чем-то в текстовом поле, hobby переменные будет обновляться немедленно, и вы можете получить доступ к обновленному значению по something.value синтаксису так hobby.value даст вам обновленное значение.

Answer 2

Попробуйте добавить это в шаблон (HTML):

<button (click)="clicked(hobby)">Click</button> 

Это дополнение к вашему компоненту класса:

clicked(a) { 
    console.log(a); 
} 

Вы увидите, что это значит.

Answer 3

См. Template Syntax > Referencing a template reference variable.

Префикс хеша (#) на «[хобби]» означает, что мы определяем переменную [хобби].

Это то же самое, что и с использованием атрибута ref-hobby и позволяет получить доступ к содержимому переменной, например, в обработчиках кликов.

<input #hobby> 
<button (click)="something(hobby.value)">Do Something</button>