ngForやngIfと同様に、ngSwitchは組み込みのテンプレートディレクティブです。 JavaScriptのswitchステートメントと同じように動作します。 これを使用して、DOMに複数の可能な要素ツリーの1つを含めます。
この投稿はAngular2以上をカバーしています
<div [ngSwitch]="dietSelection"> <p *ngSwitchCase="'gf'">Gluten-free</p> <p *ngSwitchCase="'veg'">Vegetarian / Vegan</p> <p *ngSwitchCase="'paleo'">Paleo</p> <p *ngSwitchDefault>Standard diet</p> </span>
上記の例では、dietSelectionが'gf' に設定されている場合、グルテンフリーの段落のみがDOMに含まれます。 その段落に子DOM要素が含まれている場合、これらも含まれます。
構文がngIfまたはngForの構文とわずかに異なり、ngSwitchがプロパティバインディングとして使用され、*文字がないことに注意してください。 代わりに、*はngSwitchCaseおよびngSwitchDefaultディレクティブと一緒に使用されます。これは、これらがテンプレートを作成するものであるためです。
