角度ガイド

AngularText補間



Angular Text Interpolation



テキスト補間を使用すると、動的な文字列値をHTMLテンプレートに組み込むことができます。補間を使用すると、ユーザーの名前を含むカスタムグリーティングを表示するなど、アプリケーションビューに表示される内容を動的に変更できます。

このガイドのすべての構文とコードスニペットについては、実際の例を参照してください。



補間による値の表示

補間とは、マークアップされたテキストに式を埋め込むことです。デフォルトでは、補間は二重中括弧を使用します{{ と}}区切り文字として。

補間がどのように機能するかを説明するために、currentCustomer変数：



currentCustomer = 'Maria';

補間を使用して、対応するコンポーネントテンプレートにこの変数の値を表示できます。

<h3>Current customer: {{ currentCustomer }}h3>

Angularが置き換えられます対応するコンポーネントプロパティの文字列値を持つcurrentCustomer。この場合、値は次のようになります。マリア。

次の例では、AngularはタイトルとitemImageUrlプロパティを使用して、タイトルテキストと画像を表示します。



<p>{{title}}p> <div><img src='{{itemImageUrl}}'>div>

テンプレート式

テンプレート 表現 値を生成し、二重中括弧内に表示されます。{{}}。 Angularは式を解決し、それをバインディングターゲットのプロパティに割り当てます。ターゲットは、HTML要素、コンポーネント、またはディレクティブである可能性があります。

補間による式の解決

より一般的には、中括弧の間のテキストは、Angularが最初に評価してから文字列に変換するテンプレート式です。次の補間は、2つの数値を追加することによってポイントを示しています。

 <p>The sum of 1 + 1 is {{1 + 1}}.p>

式は、次のようなホストコンポーネントのメソッドを呼び出すこともできます。次の例のgetVal（）：

 <p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}.p>

補間を使用すると、Angularは次のタスクを実行します。

  1. 二重中括弧で囲まれたすべての式を評価します。
  2. 式の結果を文字列に変換します。
  3. 結果を隣接するリテラル文字列にリンクします。
  4. コンポジットを要素またはディレクティブプロパティに割り当てます。

内挿オプションを使用して内挿区切り文字を構成できます。@コンポーネント（）メタデータ。

構文

テンプレート式はJavaScriptに似ています。以下の例外を除いて、多くのJavaScript式は正当なテンプレート式です。

次のような副作用がある、または副作用を助長するJavaScript式を使用することはできません。

  • 課題（=、+ =、-=、...）
  • などの演算子新着、typeof、またはinstanceof
  • 式を連鎖させる;また、
  • インクリメント演算子とデクリメント演算子++および-
  • ES2015 +オペレーターの一部

JavaScript構文とのその他の注目すべき違いは次のとおりです。

  • 次のようなビット演算子はサポートされていません|と＆
  • 新しい テンプレート式演算子 、 そのような|、？。と！

式のコンテキスト

補間された式にはコンテキストがあります。これは、式が属するアプリケーションの特定の部分です。通常、このコンテキストはコンポーネントインスタンスです。

次のスニペットでは、式推奨と表現itemImageUrl2は、のプロパティを参照しますAppComponent。

<h4>{{recommended}}h4> <img [src]='itemImageUrl2'>

式は、のプロパティを参照することもできます テンプレートの などのコンテキスト テンプレート入力変数 または テンプレート参照変数 。

次の例では、次のテンプレート入力変数を使用しています。お客様。

<ul> <li *ngFor='let customer of customers'>{{customer.name}}li> ul>

この次の例では、テンプレート参照変数を取り上げています。#customerInput。

<label>Type something: <input #customerInput>{{customerInput.value}} label>

テンプレート式は、グローバル名前空間内の何かを参照することはできません。未定義。彼らは参照することはできませんウィンドウまたは資料。さらに、彼らは呼び出すことができませんconsole.log（）またはMath.max（）であり、式コンテキストのメンバーを参照するように制限されています。

名前の衝突を防ぐ

式が評価されるコンテキストは、テンプレート変数s、ディレクティブのコンテキストオブジェクト（存在する場合）、およびコンポーネントのメンバーの和集合です。これらの名前空間の複数に属する名前を参照する場合、Angularは次のロジックを適用してコンテキストを決定します。

  1. テンプレート変数名。
  2. ディレクティブのコンテキストでの名前。
  3. コンポーネントのメンバー名。

変数が別のコンテキストで変数をシャドウイングしないようにするには、変数名を一意にします。次の例では、AppComponentテンプレートが挨拶します顧客、パドマ。

NS次に、ngForはそれぞれをリストしますの顧客顧客の配列。

@Component({ template: ` 
     
  • {{ customer.value }}
    •  
 ` }) class AppComponent { customers = [{value: 'Ebony'}, {value: 'Chiho'}]; customer = 'Padma'; }

NS内の顧客ngForは、したがって、の顧客顧客の配列、この場合はエボニーとチホ。このリストにはPadmaは含まれていません。外の顧客ngForは別のコンテキストにあります。逆に、の顧客

エボニーやチホは含まれていません。customerはクラスであり、クラス値は顧客はパドマです。

式のベストプラクティス

テンプレート式を使用する場合は、次のベストプラクティスに従ってください。

  • 短い式を使用する



    可能な限り、プロパティ名またはメソッド呼び出しを使用してください。アプリケーションとビジネスロジックをコンポーネントに保持し、開発とテストが容易になります。

  • クイック実行

    Angularは毎回テンプレート式を実行します 変化の検出 サイクル。多くの非同期アクティビティは、Promiseの解決、HTTPの結果、タイマーイベント、キーの押下、マウスの移動など、変更検出サイクルをトリガーします。

    特に低速のデバイスでは、ユーザーエクスペリエンスを可能な限り効率的に保つために、式はすぐに終了する必要があります。計算に多くのリソースが必要な場合は、値をキャッシュすることを検討してください。

  • 目に見える副作用はありません

    Angularによると 一方向データフローモデル 、テンプレート式は、ターゲットプロパティの値以外のアプリケーション状態を変更しないでください。コンポーネント値を読み取っても、他の表示値は変更されません。ビューは、1回のレンダリングパスを通じて安定している必要があります。

    べき等式は副作用を軽減します

    NS べき等 式は副作用がなく、Angularの変更検出パフォーマンスを向上させます。角度の用語では、べき等式は常に まったく同じこと 従属値の1つが変更されるまで。

    依存値は、イベントループの1ターン中に変更されるべきではありません。べき等式が文字列または数値を返す場合、2回連続して呼び出すと、同じ文字列または数値を返します。式がオブジェクトを返す場合、配列、それは同じオブジェクトを返します リファレンス あなたがそれを2回続けて呼ぶならば。

    この動作には、以下に適用される1つの例外があります。* ngFor。* ngForは持っていますオブジェクトを反復処理するときにオブジェクトの値の変更を処理できるtrackBy機能。見る * ngFor withtrackBy 詳細については。