web-dev-qa-db-ja.com

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

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

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

そしてそれはうまくいきます。

しかし、＃searchBoxの意味がわかりません。私はその文書の中にも明確なものは何も見つけていない。

誰かが私にそれがどのように機能するのか説明してもらえますか？

ありがとう

javascripthtmlhtml5angulartypescript
91
ackuser

これは、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 }}
117
Harry

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

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

EDIT

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

46
Matheus Martins

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

  • 要素がプレーンDOM要素の場合はinput要素
  • コンポーネントまたはディレクティブのインスタンスである場合は、コンポーネントまたはディレクティブのインスタンス
  • barが#foo="bar"のように使用される場合は、特定のコンポーネントまたはディレクティブ
@Directive({ // or @Component
  ...
  exportAs: 'bar'
})

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

@ViewChild('searchBox') searchBox:HTMLInputElement;
16
Günter Zöchbauer

angulartraining.com から：

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

<input #phone placeholder="phone number">

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

入力の値を取得するためにその参照を使用する方法は次のとおりです。

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

phoneは、の HTMLElement オブジェクトインスタンスを参照します。入力その結果、phoneには、あらゆるHTMLElementのプロパティとメソッド（id、name、innerHTML、valueなど）がすべて含まれます。

上記は、検証の観点からはあまり必要としない単純な形式で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}}
13
ruffin