テンプレートのAngular 2ハッシュタグはどういう意味ですか？

私はangular 2で作業していますが、次のようなものが見つかりました

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

そしてそれは動作します。

しかし、#searchBoxの意味がわかりません。どちらのドキュメントにも明確な情報は見つかりませんでした。

誰か私にそれがどのように機能するか説明できますか？

これは、DOM要素を変数として宣言するAngular 2テンプレートシステムで使用される構文です。

ここで、コンポーネントにテンプレートURLを指定します。

import {Component} from 'angular2/core';

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

export class HarrysApp {}

テンプレートはHTMLをレンダリングします。テンプレートでは、データ、プロパティバインディング、イベントバインディングを使用できます。これは、次の構文で実行されます。

# -変数宣言

() -イベントバインディング

[] -プロパティバインディング

[()] -双方向のプロパティバインディング

{{ }} -補間

* -構造ディレクティブ

#構文は、DOMは、テンプレート内のオブジェクトを参照するローカル変数名を宣言することができます。例えば

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

この#searchBoxを設定すると、Typescriptで次のように入力できます

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

編集

いくつかの例を追加：https : //plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

angulartraining.comから：

テンプレート参照変数は、Angularで多くの素晴らしいことを行えるようにする小さな宝石です。テンプレートの要素への参照を作成するために単純なハッシュタグに依存しているため、私は通常、その機能を「ハッシュタグ構文」と呼びます。

<input #phone placeholder="phone number">

上記の構文は非常に単純です。後でテンプレートで使用できるinput要素への参照を作成します  。この変数のスコープは、参照が定義されているHTMLテンプレート全体であることに注意してください。

たとえば、その参照を使用して入力の値を取得する方法を次に示します。

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

電話  は入力のHTMLElementオブジェクトインスタンスを  参照する  ことに注意してください  。その結果、  電話  は、任意のHTMLElementのすべてのプロパティとメソッド（ID、名前、innerHTML、値など）が含まれます。

上記は、検証に関してそれほど必要としない単純な形式でngModelまたは他の種類のデータバインディングを使用しないようにするための良い方法です。

---

これはコンポーネントでも機能しますか？

答えはイエスです！

...その最も良い部分は、実際のコンポーネントインスタンスHelloWorldComponentへの参照を取得しているため、そのコンポーネントのメソッドまたはプロパティにアクセスできることです（それらがprivateまたはprotectedとして宣言されていても、これは驚くべきことです） ：

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

export class HelloComponent {
   name = 'Angular';
}

[...]

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

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

参照するテンプレート変数を作成します

• input要素は、プレーンなDOM要素である場合、要素
• コンポーネントまたはディレクティブのインスタンスである場合は、コンポーネントまたはディレクティブのインスタンス
• それはのように使われている場合は、いくつかの特定のコンポーネントまたはディレクティブの#foo="bar"ときbarであります

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

このようなテンプレート変数は、テンプレートバインディングまたは次のような要素クエリで参照できます。

@ViewChild('searchBox') searchBox:HTMLInputElement;