使用 *ngSwitch 的指令介绍

在Angular中， *ngSwitch 是一个结构指令，它可以根据表达式的值切换多个元素的显示/隐藏。*ngSwitch可以根据不同的条件条件，展示不同的视图，类似于JavaScript中的switch/case功能。

语法

在HTML中，可以使用如下语法来使用 *ngSwitch：

<some-element [ngSwitch]="switch_expression">
  <ng-template [ngSwitchCase]="case_expression_1">...</ng-template>
  <ng-template ngSwitchCase="case_expression_2">...</ng-template>
  <ng-template ngSwitchDefault>...</ng-template>
</some-element>

注意：需要将 [ngSwitch] 属性绑定到一个expression表达式。case_expression_1，case_expression_2都是和[ngSwitch]绑定expression表达式进行比较。ngSwitchDefault是当没有任何一个表达式对应时的默认情况。

示例

下面是一个使用*ngSwitch指令的示例：

<div [ngSwitch]="color">
  <span *ngSwitchCase="'red'">Red color</span>
  <span *ngSwitchCase="'green'">Green color</span>
  <span *ngSwitchCase="'blue'">Blue color</span>
  <span *ngSwitchDefault>No color found!</span>
</div>

在这个例子中，color变量的值决定了应该显示哪个< span>元素或'no color found!'。如果color的值为'red'，则会显示'Red color'；如果值为'green'，则会显示'Green color'；如果值为'blue'，则会显示'Blue color'，如果没有匹配到，则会显示'No color found!'。

总结

因此，*ngSwitch 指令是一种非常有用和强大的方式来根据表达式的值切换一个或多个元素的展示，而不必使用繁琐的if/else语句。 此外，同时使用 *ngSwitchCase 和 *ngSwitchDefault，可以更好的控制匹配条件，展示不同的视图。