Şablondaki Açısal 2 hashtag'leri ne anlama geliyor?

Açısal 2 ile çalışıyorum ve şöyle bir şey buldum

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

ve çalışıyor.

Ancak, # searchBox'ın anlamını anlamıyorum . Dokümanda da net bir şey bulamadım.

Biri bana nasıl çalıştığını açıklayabilir mi?

DOM öğelerini değişken olarak bildiren Açısal 2 şablonlama sisteminde kullanılan sözdizimidir.

Burada bileşenime bir şablon URL'si veriyorum:

import {Component} from 'angular2/core';

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

export class HarrysApp {}

Şablonlar HTML oluşturur. Şablonda veri, özellik bağlama ve olay bağlama kullanabilirsiniz. Bu, aşağıdaki sözdizimi ile gerçekleştirilir:

# - değişken beyan

() - olay bağlama

[] - mülkiyet bağlama

[()] - iki yönlü özellik bağlama

{{ }} - interpolasyon

* - yapısal direktifler

#Sözdizimi DOM şablon nesneleri başvuran yerel değişken adlarını ilan edebilir. Örneğin

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

Bu #searchBox'ı ayarladığınızda, bu girdiyi Typcript'inizde

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

DÜZENLE

Bazı örnek ekleme: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

Gönderen angulartraining.com :

Şablon referans değişkenleri , Angular ile çok güzel şeyler yapmanıza izin veren küçük bir mücevherdir. Genellikle bu özelliği "hashtag sözdizimi" olarak adlandırırım çünkü şablondaki bir öğeye referans oluşturmak için basit bir hashtag'e dayanır:

<input #phone placeholder="phone number">

Yukarıdaki sözdiziminin yaptığı oldukça basittir: Şablonumda daha sonra kullanılabilecek giriş öğesine bir referans oluşturur  . Bu değişkenin kapsamının, başvurunun tanımlandığı HTML şablonunun tamamı olduğunu unutmayın.

İşte, örneğin, giriş değerini almak için bu başvuruyu kullanabilirsiniz:

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

Not  telefon  belirtir  HTMLElement nesne, örneğin  giriş . Sonuç olarak,  telefon  herhangi bir HTMLElement öğesinin tüm özelliklerine ve yöntemlerine sahiptir (id, ad, innerHTML, değer vb.)

Yukarıda, doğrulama açısından fazla bir şey gerektirmeyen ngModel veya başka bir tür veri bağlamayı basit bir biçimde kullanmaktan kaçınmanın güzel bir yoludur.

---

Bu, bileşenlerle de çalışır mı?

Cevap Evet!

... bunun en iyi yanı, gerçek bileşen örneği olan HelloWorldComponent'e başvurmamızdır, böylece bu bileşenin herhangi bir yöntemine veya özelliğine erişebiliriz (özel veya korumalı olarak bildirilse bile, bu şaşırtıcıdır) :

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

export class HelloComponent {
   name = 'Angular';
}

[...]

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

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

Referans veren bir şablon değişkeni oluşturur

• inputeleman düz DOM öğesi ise eleman
• bileşen veya yönerge içeren bir öğe ise bileşen veya yönerge örneği
• Bazı özel bileşen veya direktif bunun gibi kullanılabilir eğer #foo="bar"zaman barolduğunu

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

Böyle bir şablon değişkenine şablon bağlamalarda veya aşağıdaki gibi öğe sorgularında referans verilebilir

@ViewChild('searchBox') searchBox:HTMLInputElement;