Что означают хэштеги Angular 2 в шаблоне?

Я работаю с Angular 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)

РЕДАКТИРОВАТЬ

Добавляем пример: 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, name, innerHTML, value и т. Д.)

Вышеупомянутое - хороший способ избежать использования 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;