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

Я работаю с angular 2, и я нашел что-то вроде

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

и он работает.

Однако я не понимаю значения #searchBox. Я не нашел ничего ясного ни в доке.

Может ли кто-нибудь объяснить мне, как это работает?

Спасибо

Ответ 1

Синтаксис, используемый в шаблонной системе 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 }}

Ответ 2

Когда вы устанавливаете этот #searchBox, вы можете получить этот ввод на своем Typescript, как

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

ИЗМЕНИТЬ

Добавление некоторого примера: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

Ответ 3

Он создает переменную шаблона, которая ссылается на

элемент input, если элемент является простым элементом DOM
экземпляр компонента или директивы, если он является элементом с компонентом или директивой
некоторый конкретный компонент или директива, если он используется как #foo="bar", когда bar есть

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

Такая переменная шаблона может быть указана в привязке шаблонов или в элементах запросов, таких как

@ViewChild('searchBox') searchBox:HTMLInputElement;