Angular テンプレートの構文の説明

この記事では主に Angular テンプレート構文の説明を紹介します。これを必要な友達に共有します。

補間式

Angular ペア すべて。二重中括弧内の

式

が評価され、評価結果が文字列に変換され、隣接する文字列リテラルと連結されます。最後に、結合された補間結果を要素またはディレクティブの属性に割り当てます。

表面的には、要素タグの間に結果を挿入し、タグの属性を割り当てました。 このように考えると便利ですし、この誤解によってトラブルに巻き込まれることはほとんどありません。 しかし、厳密に言えば、これは真実ではありません。補間式は、Angular がプロパティ バインディングに変換する特別な構文です。

は

<p>Hello {{name}}</p>

2 と同等です。 テンプレート式

テンプレート式は値を生成します。 Angular はこの式を実行し、それをバインディング ターゲットのプロパティ (HTML 要素、コンポーネント、またはディレクティブなど) に割り当てます。

入力属性の値は定数です

<p [textContent]="interpolate([&#39;Hello&#39;], [name])"></p>

は

<show-title title="Some Title"></show-title>

の値と同等です

<show-title [title]="&#39;Some Title&#39;"></show-title>

入力属性の値は変数です

<show-title [title]="someTitle"></show-title>

角括弧を忘れないでください。角括弧はAngularに評価するように指示しますテンプレート式。 角括弧を追加するのを忘れた場合、Angular は式を文字列定数として扱い、その文字列を使用してターゲット プロパティを初期化します。文字列は評価されません。

テンプレート変数

hero の前の let キーワードは、hero という名前の

テンプレート入力変数 を作成します。 ngFor ディレクティブは、親コンポーネントの hero プロパティによって返される hero 配列を反復処理し、反復ごとに配列の現在の要素を hero 変数に割り当てます。

<p *ngFor="let hero of heroes">{{hero.name}}</p>

テンプレート参照変数

テンプレート参照変数は、通常、テンプレート内の DOM 要素を参照するために使用されます。Angular コンポーネント、ディレクティブ、または Web コンポーネントを参照することもできます。ポンド記号 (#) を使用して参照変数を宣言します。 #phone は、 要素を参照する変数を宣言することを意味します。このテンプレート参照変数はテンプレート内のどこでも参照できます。

<input #phone placeholder="phone number">

テンプレート ステートメント

テンプレート ステートメントは、バインディング ターゲット (HTML 要素、コンポーネント、ディレクティブなど) によってトリガーされたイベントに応答するために使用されます。

<date-picker (dateChanged)="statement()"></date-picker>

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

Angular-UI Bootstrap コンポーネントを使用してアラートを実装する方法

config/index.js の詳細な説明: vue での構成

以上がAngular テンプレートの構文の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。