Що означає хештеги Angular 2 у шаблоні?

Я працюю з кутовим 2 і знайшов щось подібне

<input #searchBox (keyup)="search(searchBox.value)"

і це працює.

Однак я не розумію значення #searchBox . Я не знайшов нічого чіткого ні в документі.

Хтось може мені пояснити, як це працює?

Це синтаксис, який використовується в системі шаблонів Angular 2, яка оголошує елементи DOM як змінні.

Тут я надаю своєму компоненту URL-адресу шаблону:

import {Component} from 'angular2/core';

@Component({
   selector: 'harrys-app',
   templateUrl: 'components/harry/helloworld.component.html'
})

export class HarrysApp {}

Шаблони відображають HTML. У шаблоні ви можете використовувати дані, прив'язку властивостей та прив'язку подій. Це здійснюється за допомогою наступного синтаксису:

# - змінна декларація

() - прив'язка події

[] - прив’язка власності

[()] - двостороння прив'язка властивості

{{ }} - інтерполяція

* - структурні директиви

#Синтаксис може оголошувати локальні імена змінних , який посилається на об'єкти DOM в шаблоні. напр

 <span [hidden]="harry.value">*</span>
 <input type="text" #harry>
 {{ harry.value }}

Коли ви встановите цей #searchBox, ви можете отримати цей вхід на зразок вашого Typescript

    @ViewChild('searchBox') searchBox;
    console.info(searchBox.nativeElement.value)

EDIT

Додавання прикладу: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

З angulartraining.com :

Змінні посилання на шаблони - це маленький дорогоцінний камінь, який дозволяє отримати багато приємних речей, що виконуються з Angular. Я зазвичай називаю цю функцію "синтаксисом хештега", тому що, ну, вона покладається на простий хештег, щоб створити посилання на елемент у шаблоні:

<input #phone placeholder="phone number">

Згаданий вище синтаксис досить простий: він створює посилання на  вхідний елемент, який можна буде використовувати згодом у моєму шаблоні. Зауважте, що сферою застосування цієї змінної є весь HTML-шаблон, у якому визначено посилання.

Ось як я міг би скористатися цим посиланням, щоб отримати значення введення, наприклад:

<!-- phone refers to the input element --> 
<button (click)="callPhone(phone.value)">Call</button>

Зауважте, що  телефон  посилається на  екземпляр об'єкта HTMLElement для  введення . В результаті  телефон  має всі властивості та методи будь-якого HTMLElement (id, ім'я, InternalHTML, значення тощо)

Вищесказане є приємним способом уникнути використання ngModel або якогось іншого виду прив'язки даних у простій формі, яка не потребує великих термінів перевірки.

---

Це також працює з компонентами?

Відповідь ТАК!

... найкраща частина полягає в тому, що ми отримуємо посилання на фактичний екземпляр компонента HelloWorldComponent, тому ми можемо отримати доступ до будь-яких методів або властивостей цього компонента (навіть якщо вони оголошені приватними або захищеними, що дивно) :

@Component({
  selector: 'app-hello',
  // ...

export class HelloComponent {
   name = 'Angular';
}

[...]

<app-hello #helloComp></app-hello>

<!-- The following expression displays "Angular" -->
{{helloComp.name}}

Він створює змінну шаблону, на яку посилається

• inputелемент , якщо елемент є простим DOM елемент
• екземпляр компонента або директиви, якщо це елемент із компонентом або директивою
• деякі конкретні компоненти або директиви , якщо він використовується , як #foo="bar"коли barце

@Directive({ // or @Component
  ...
  exportAs: 'bar'
})

На таку змінну шаблону можна посилатися у прив'язці шаблону або в таких запитах елементів

@ViewChild('searchBox') searchBox:HTMLInputElement;