Angular中的NgSwitch指令

与 ngFor 和 ngIf 一样，ngSwitch 是一个内置的模板指令。它的行为方式与 JavaScript switch 语句类似。使用它在 DOM 中包含多个可能的元素树之一。

这篇文章涵盖了 Angular 2 及更高版本

<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'，则只有带有 Gluten-free 的段落将包含在 DOM 中。如果该段落包含子 DOM 元素，那么这些元素也会被包含在内。

请注意语法与 ngIf 或 ngFor 的语法略有不同，ngSwitch 用作属性绑定并且没有 * 字符。相反，* 与 ngSwitchCase 和 ngSwitchDefault 指令一起使用，因为它们是创建模板的指令。

也可以看看

*ngFor
*ngIf