Apa maksud dari tagar 2 Sudut dalam template?

Saya bekerja dengan sudut 2 dan saya telah menemukan sesuatu seperti

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

dan itu berhasil.

Namun, saya tidak mengerti arti #searchBox . Saya belum menemukan sesuatu yang jelas di dok.

Adakah yang bisa menjelaskan kepada saya cara kerjanya?

Sintaksnya digunakan dalam sistem templating Angular 2 yang mendeklarasikan elemen DOM sebagai variabel.

Di sini saya memberikan komponen saya URL templat:

import {Component} from 'angular2/core';

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

export class HarrysApp {}

Templat membuat HTML. Dalam templat Anda dapat menggunakan data, pengikatan properti, dan pengikatan acara. Ini dilakukan dengan sintaks berikut:

# - deklarasi variabel

() - acara mengikat

[] - properti mengikat

[()] - Pengikatan properti dua arah

{{ }} - interpolasi

* - arahan struktural

The #sintaks dapat mendeklarasikan nama variabel lokal yang referensi DOM objek dalam sebuah template. misalnya

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

Saat Anda menyetel #searchBox ini, Anda bisa mendapatkan input ini pada sejenis naskah Anda

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

EDIT

Menambahkan beberapa contoh: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

Dari angulartraining.com :

Variabel referensi template adalah permata kecil yang memungkinkan untuk menyelesaikan banyak hal bagus dengan Angular. Saya biasanya menyebut fitur itu "sintaks hashtag" karena, yah, itu bergantung pada hashtag sederhana untuk membuat referensi ke elemen dalam template:

<input #phone placeholder="phone number">

Apa yang dilakukan sintaks di atas cukup sederhana: Ini menciptakan referensi ke  elemen input yang dapat digunakan nanti di template saya. Perhatikan bahwa ruang lingkup untuk variabel ini adalah seluruh templat HTML di mana referensi didefinisikan.

Inilah cara saya dapat menggunakan referensi itu untuk mendapatkan nilai input, misalnya:

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

Perhatikan bahwa  ponsel  merujuk ke  instance objek HTMLElement untuk  input . Akibatnya,  ponsel  memiliki semua properti dan metode HTMLElement apa pun (id, nama, innerHTML, nilai, dll.)

Di atas adalah cara yang bagus untuk menghindari penggunaan ngModel atau jenis data lainnya yang mengikat dalam bentuk sederhana yang tidak memerlukan banyak dalam hal validasi.

---

Apakah ini juga berfungsi dengan komponen?

Jawabannya iya!

... bagian terbaiknya adalah kami mendapatkan referensi ke instance komponen aktual, HelloWorldComponent, sehingga kami dapat mengakses metode atau properti apa pun dari komponen itu (bahkan jika itu dinyatakan sebagai pribadi atau dilindungi, yang mengejutkan) :

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

export class HelloComponent {
   name = 'Angular';
}

[...]

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

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

Itu menciptakan variabel template yang referensi

• yang inputelemen jika elemen adalah elemen DOM polos
• komponen atau arahan contoh jika itu adalah elemen dengan komponen atau arahan
• beberapa komponen tertentu atau direktif jika digunakan seperti #foo="bar"saat barini

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

Variabel templat semacam itu dapat dirujuk dalam binding templat atau dalam kueri elemen seperti

@ViewChild('searchBox') searchBox:HTMLInputElement;