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

<$>[注]这篇文章涵盖了角度2及以上<$>

1<div [ngSwitch]="dietSelection">
2  <p *ngSwitchCase="'gf'">Gluten-free</p>
3  <p *ngSwitchCase="'veg'">Vegetarian / Vegan</p>
4  <p *ngSwitchCase="'paleo'">Paleo</p>
5  <p *ngSwitchDefault>Standard diet</p>
6</span>

在上面的例子中，如果dietSelection设置为‘gf’，那么只有不含谷蛋白的段落才会包含在DOM中。如果该段包含子DOM元素，则这些元素也将包括在内。

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

See So

• * ngFor
• * ngIf