O que significa hashtags Angular 2 no modelo?

Estou trabalhando com angular 2 e encontrei algo como

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

e funciona.

No entanto, não entendo o significado de #searchBox . Também não encontrei nada claro no documento.

Alguém poderia me explicar como isso funciona?

É a sintaxe usada no sistema de modelagem Angular 2 que declara elementos DOM como variáveis.

Aqui, dou ao meu componente um URL de modelo:

import {Component} from 'angular2/core';

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

export class HarrysApp {}

Modelos renderizam HTML. Em um modelo, você pode usar dados, associação de propriedades e associação de eventos. Isso é realizado com a seguinte sintaxe:

# - declaração variável

() - associação de eventos

[] - ligação de propriedade

[()] - ligação de propriedade bidirecional

{{ }} - interpolação

* - diretivas estruturais

A #sintaxe pode declarar nomes de variáveis ​​locais que referenciam objetos DOM em um modelo. por exemplo

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

Ao definir essa #searchBox, você pode obter essa entrada no seu Typecript, como

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

EDITAR

Adicionando algum exemplo: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

Em angulartraining.com :

As variáveis ​​de referência de modelo são uma pequena jóia que permite fazer muitas coisas legais com o Angular. Eu costumo chamar esse recurso de "sintaxe da hashtag" porque, bem, ele se baseia em uma hashtag simples para criar uma referência a um elemento em um modelo:

<input #phone placeholder="phone number">

O que a sintaxe acima faz é bastante simples: ele cria uma referência ao  elemento de entrada que pode ser usado posteriormente no meu modelo. Observe que o escopo dessa variável é o modelo HTML inteiro no qual a referência está definida.

Aqui está como eu poderia usar essa referência para obter o valor da entrada, por exemplo:

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

Observe que  phone  refere-se à  instância do objeto HTMLElement da  entrada . Como resultado, o  telefone  possui todas as propriedades e métodos de qualquer HTMLElement (ID, nome, innerHTML, valor etc.)

A descrição acima é uma boa maneira de evitar o uso do ngModel ou algum outro tipo de ligação de dados de forma simples que não exija muito em termos de validação.

---

Isso também funciona com componentes?

A resposta é sim!

... a melhor parte disso é que estamos recebendo uma referência à instância real do componente, HelloWorldComponent, para que possamos acessar quaisquer métodos ou propriedades desse componente (mesmo que sejam declarados como privados ou protegidos, o que é surpreendente) :

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

export class HelloComponent {
   name = 'Angular';
}

[...]

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

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

Ele cria uma variável de modelo que referencia

• o inputelemento se o elemento for um elemento DOM simples
• a instância de componente ou diretiva, se for um elemento com um componente ou diretiva
• algum componente ou diretiva específica, se usado como #foo="bar"quando baré

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

Essa variável de modelo pode ser referenciada em ligações de modelo ou em consultas de elemento como

@ViewChild('searchBox') searchBox:HTMLInputElement;