組み込み制御フロー

Angularテンプレートは、要素の条件付き表示、非表示、および繰り返しを可能にする 制御フローブロック をサポートしています。

@if ブロック条件式

@if ブロックは、条件式が真の場合に、そのコンテンツを条件付きで表示します。

      
@if (a > b) {
  {{a}} is greater than {{b}}
}
    

@if ブロックには、1つ以上の関連付けられた@else ブロックを含めることができます。 @if ブロックの直後には、任意の数の@else if ブロックと1つの@else ブロックをオプションで指定できます。

      
@if (a > b) {
  {{a}} is greater than {{b}}
} @else if (b > a) {
  {{a}} is less than {{b}}
} @else {
  {{a}} is equal to {{b}}
}
    

条件式の結果への参照

新しい組み込みの@if 条件式は、式の結果への参照をサポートしており、 一般的なコーディングパターンの解決策を提供します。

      
@if (users$ | async; as users) {
  {{ users.length }}
}
    

@for ブロック - 反復子

@for は、コレクション内の各アイテムに対してブロックのコンテンツを繰り返しレンダリングします。 コレクションは、任意のJavaScript 反復可能として表現できますが、 通常のArrayを使用するとパフォーマンス上の利点があります。基本的な@for ループは次のようになります。

      
@for (item of items; track item.id) {
  {{ item.name }}
}
    

2つのコレクションの差分を計算するためのtrack

track 式の値は、DOM内のビューに配列アイテムを関連付けるために使用されるキーを決定します。 アイテムのIDを明確に示すことで、Angularはアイテムがコレクションに追加、削除、または移動されたときに、 DOM操作の最小限のセットを実行できます。

track を効果的に使用すると、特にデータコレクションに対するループにおいて、 アプリケーションのパフォーマンスを大幅に向上させることができます。

変更を受けないコレクション（アイテムが移動、追加、または削除されない）の場合、 track $index は効率的な戦略です。 変更可能なデータや頻繁な変更があるコレクションの場合、各アイテムを一意に識別するプロパティを選択して、track 式として使用します。

イミュータブルなデータ構造でオブジェクトIDをtrack キーとして使用する場合、DOMの再作成が増える可能性があることに注意してください。 これは、不要なパフォーマンスコストにつながる可能性があります。

$index およびその他のコンテキスト変数

@for のコンテンツ内では、いくつかの暗黙的な変数は常に使用できます。

これらの変数は常にこれらの名前で使用できますが、let セグメントを使用して別名をつけることができます。

      
@for (item of items; track item.id; let idx = $index, e = $even) {
Item #{{ idx }}: {{ item.name }}
}
    

別名をつけることは、特にコンテキスト変数の名前が衝突する可能性があるネストされた@for ブロックを使用する場合に役立ちます。

empty ブロック

@for ブロックコンテンツの直後に、オプションで@empty セクションを含めることができます。 @empty ブロックのコンテンツは、アイテムがない場合に表示されます。

      
@for (item of items; track item.name) {
  <li> {{ item.name }}</li>
} @empty {
  <li> There are no items.</li>
}
    

@switch ブロック - 選択

switch の構文はif と非常によく似ており、JavaScriptのswitch 文を元にしています。

      
@switch (condition) {
  @case (caseA) {
    Case A.
  }
  @case (caseB) {
    Case B.
  }
  @default {
    Default case.
  }
}
    

条件式の値は、=== 演算子を使用してケース式と比較されます。

@switch にはフォールスルーはありませんそのため、break やreturn 文に相当するものはありません。

@default ブロックはオプションであり、省略できます。 @case が式と一致せず、@default ブロックがない場合、何も表示されません。

組み込み制御フローとNgIf、NgSwitch、NgFor 構造ディレクティブ

@if ブロックは、UIの条件付き部分を表す*ngIf に代わるものです。

@switch ブロックは、ngSwitch に代わるもので、以下のような大きな利点があります。

• 条件式や各条件付きテンプレートを保持するコンテナ要素を必要としません。
• 各ブランチ内で型の絞り込みを含め、テンプレートの型チェックをサポートします。

@for ブロックは、*ngFor に代わるもので、 その構造ディレクティブであるNgFor の先行バージョンとはいくつかの違いがあります。

• 追跡式（オブジェクトIDに対応するキーを計算する）は必須ですが、使いやすさが向上しています （trackBy メソッドを作成する代わりに、式を書くだけで済みます）。
• Angularのカスタマイズ可能な差分実装（IterableDiffer）ではなく、 コレクションの変更に対するDOM操作の最小限の数を計算するための新しい最適化されたアルゴリズムを使用しています。
• @empty ブロックをサポートしています。

track 設定は、NgFor のtrackBy 関数の概念に代わるものです。 @for は組み込みなので、trackBy 関数を渡すよりも優れたエクスペリエンスを提供でき、キーを表す式を直接使用できます。 trackBy からtrack への移行は、trackBy 関数を呼び出すことで可能です。

      
@for (item of items; track itemId($index, item)) {
  {{ item.name }}
}