¿Qué significan los hashtags de Angular 2 en la plantilla?

Estoy trabajando con angular 2 y he encontrado algo como

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

y funciona.

Sin embargo, no entiendo el significado de #searchBox . No he encontrado nada claro tampoco en el documento.

¿Alguien podría explicarme cómo funciona?

Es la sintaxis utilizada en el sistema de plantillas Angular 2 que declara elementos DOM como variables.

Aquí le doy a mi componente una URL de plantilla:

import {Component} from 'angular2/core';

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

export class HarrysApp {}

Las plantillas representan HTML. En una plantilla puede usar datos, enlace de propiedades y enlace de eventos. Esto se logra con la siguiente sintaxis:

# - declaración variable

() - enlace de eventos

[] - enlace de propiedad

[()] - enlace de propiedad bidireccional

{{ }} - interpolación

* - directivas estructurales

La #sintaxis puede declarar nombres de variables locales que hacen referencia a objetos DOM en una plantilla. p.ej

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

Cuando configura este #searchBox, puede obtener esta entrada en su mecanografiado como

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

EDITAR

Agregando un ejemplo: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

Desde angulartraining.com :

Las variables de referencia de plantilla son una pequeña joya que permite hacer muchas cosas buenas con Angular. Normalmente llamo a esa característica "la sintaxis de hashtag" porque, bueno, se basa en un simple hashtag para crear una referencia a un elemento en una plantilla:

<input #phone placeholder="phone number">

Lo que hace la sintaxis anterior es bastante simple: crea una referencia al  elemento de entrada que se puede usar más adelante en mi plantilla. Tenga en cuenta que el alcance de esta variable es la plantilla HTML completa en la que se define la referencia.

Así es como podría usar esa referencia para obtener el valor de la entrada, por ejemplo:

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

Tenga en cuenta que el  teléfono  hace referencia a la  instancia del objeto HTMLElement para la  entrada . Como resultado,  teléfono  tiene todas las propiedades y métodos de cualquier elemento HTMLE (id, nombre, innerHTML, valor, etc.)

Lo anterior es una buena manera de evitar el uso de ngModel u otro tipo de enlace de datos en una forma simple que no requiere mucho en términos de validación.

---

¿Esto también funciona con componentes?

¡La respuesta es sí!

... la mejor parte es que estamos obteniendo una referencia a la instancia del componente real, HelloWorldComponent, para que podamos acceder a cualquier método o propiedades de ese componente (incluso si se declaran como privados o protegidos, lo cual es sorprendente) :

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

export class HelloComponent {
   name = 'Angular';
}

[...]

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

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

Crea una variable de plantilla que hace referencia

• el inputelemento si el elemento es un elemento DOM simple
• la instancia de componente o directiva si es un elemento con un componente o directiva
• algún componente específico o directiva si se usa como #foo="bar"cuando bares

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

Dicha variable de plantilla se puede hacer referencia en enlaces de plantilla o en consultas de elementos como

@ViewChild('searchBox') searchBox:HTMLInputElement;