Che cosa significano gli hashtag Angular 2 nel modello?

Sto lavorando con Angular 2 e ho trovato qualcosa di simile

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

e funziona.

Tuttavia, non capisco il significato di #searchBox . Non ho trovato nulla di chiaro né nel documento.

Qualcuno potrebbe spiegarmi come funziona?

È la sintassi utilizzata nel sistema di template Angular 2 che dichiara gli elementi DOM come variabili.

Qui do al mio componente un URL modello:

import {Component} from 'angular2/core';

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

export class HarrysApp {}

I modelli eseguono il rendering HTML. In un modello è possibile utilizzare dati, associazione di proprietà e associazione di eventi. Ciò si ottiene con la sintassi seguente:

# - dichiarazione variabile

() - associazione di eventi

[] - vincolo di proprietà

[()] - associazione di proprietà bidirezionale

{{ }} - interpolazione

* - direttive strutturali

La #sintassi può dichiarare nomi di variabili locali che fanno riferimento a oggetti DOM in un modello. per esempio

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

Quando imposti questo #searchBox, puoi ottenere questo input sul tuo Typescript come

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

MODIFICARE

Aggiunta di alcuni esempi: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

Da angulartraining.com :

Le variabili di riferimento del modello sono un piccolo gioiello che consente di fare molte cose carine con Angular. Di solito chiamo quella caratteristica "sintassi hashtag" perché, beh, si basa su un semplice hashtag per creare un riferimento a un elemento in un modello:

<input #phone placeholder="phone number">

Quello che fa la sintassi sopra è abbastanza semplice: crea un riferimento  all'elemento di input che può essere usato in seguito nel mio modello. Si noti che l'ambito di questa variabile è l'intero modello HTML in cui è definito il riferimento.

Ecco come ho potuto utilizzare quel riferimento per ottenere il valore dell'input, ad esempio:

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

Si noti che il  telefono si  riferisce  all'istanza dell'oggetto HTMLElement per l'  input . Di conseguenza, il  telefono  ha tutte le proprietà e i metodi di qualsiasi HTMLElement (id, nome, innerHTML, valore, ecc.)

Quanto sopra è un buon modo per evitare di usare ngModel o qualche altro tipo di associazione dei dati in una forma semplice che non richiede molto in termini di convalida.

---

Funziona anche con i componenti?

La risposta è si!

... la parte migliore è che stiamo ottenendo un riferimento all'istanza del componente reale, HelloWorldComponent, in modo da poter accedere a qualsiasi metodo o proprietà di quel componente (anche se sono dichiarati come privati ​​o protetti, il che è sorprendente) :

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

export class HelloComponent {
   name = 'Angular';
}

[...]

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

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

Crea una variabile modello che fa riferimento

• l' inputelemento se l'elemento è un semplice elemento DOM
• l'istanza del componente o della direttiva se è un elemento con un componente o una direttiva
• qualche componente specifico o direttiva se usato come #foo="bar"quando lo barè

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

Tale variabile di modello può essere referenziata in associazioni di modelli o in query di elementi simili

@ViewChild('searchBox') searchBox:HTMLInputElement;