Co oznaczają hashtagi Angular 2 w szablonie?

Pracuję z Angular 2 i znalazłem coś takiego

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

i to działa.

Jednak nie rozumiem znaczenia #searchBox . Nie znalazłem nic jasnego ani w doktorze.

Czy ktoś mógłby mi wyjaśnić, jak to działa?

Jego składnia jest używana w systemie szablonów Angular 2, który deklaruje elementy DOM jako zmienne.

Tutaj daję mojemu komponentowi adres URL szablonu:

import {Component} from 'angular2/core';

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

export class HarrysApp {}

Szablony renderują HTML. W szablonie można używać danych, powiązań właściwości i powiązań zdarzeń. Osiąga się to za pomocą następującej składni:

# - deklaracja zmiennej

() - oprawa wydarzenia

[] - wiązanie majątkowe

[()] - dwukierunkowe powiązanie własności

{{ }} - interpolacja

* - dyrektywy strukturalne

#Składnia może zadeklarować lokalne nazwy zmiennych, które Referencje DOM obiektów w szablonie. na przykład

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

Po ustawieniu tego #searchBox możesz uzyskać te dane wejściowe w swoim Typescript, takim jak

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

EDYTOWAĆ

Dodanie przykładu: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

Z angulartraining.com :

Zmienne referencyjne do szablonów to mały klejnot, który pozwala zrobić wiele fajnych rzeczy w Angular. Zwykle nazywam tę funkcję „składnią hashtagu”, ponieważ, cóż, opiera się na prostym hashtagu do utworzenia odniesienia do elementu w szablonie:

<input #phone placeholder="phone number">

To, co robi powyższa składnia, jest dość proste: tworzy odniesienie do  elementu wejściowego , którego można użyć później w moim szablonie. Zwróć uwagę, że zasięgiem dla tej zmiennej jest cały szablon HTML, w którym zdefiniowano odwołanie.

Oto jak mogę użyć tego odniesienia, aby uzyskać wartość danych wejściowych, na przykład:

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

Zwróć uwagę, że  phone  odwołuje się do  instancji obiektu HTMLElement jako  wejścia . W rezultacie  telefon  ma wszystkie właściwości i metody dowolnego elementu HTMLElement (identyfikator, nazwa, innerHTML, wartość itp.)

Powyższe jest dobrym sposobem na uniknięcie używania ngModel lub innego rodzaju wiązania danych w prostej formie, która nie wymaga wiele pod względem walidacji.

---

Czy to działa również z komponentami?

Odpowiedź brzmi tak!

... najlepsze jest to, że otrzymujemy odniesienie do rzeczywistej instancji komponentu, HelloWorldComponent, dzięki czemu możemy uzyskać dostęp do wszelkich metod lub właściwości tego komponentu (nawet jeśli są zadeklarowane jako prywatne lub chronione, co jest zaskakujące) :

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

export class HelloComponent {
   name = 'Angular';
}

[…]

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

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

Tworzy zmienną szablonową, która odwołuje się do

• inputelementem, gdy element jest zwykłym elementu DOM
• instancja komponentu lub dyrektywy, jeśli jest to element z komponentem lub dyrektywą
• jakiś określony komponent lub dyrektywa, jeśli jest używana tak, jak #foo="bar"kiedy barjest

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

Do takiej zmiennej szablonu można się odwoływać w powiązaniach szablonów lub w zapytaniach o elementy, takich jak

@ViewChild('searchBox') searchBox:HTMLInputElement;