Angular 8 ngSwitch 指令

在 Angular 8 中，ngSwitch 是一个结构指令，用于添加/删除 DOM 元素。 它类似于 C# 的 switch 语句。 ngSwitch 指令应用于带有 switch 表达式的容器元素。

ngSwitch 的语法

ngSwitchCase

在 Angular ngSwitchCase 指令中，内部元素放置在容器元素内。 ngSwitchCase 指令应用于带有匹配表达式的内部元素。 只要匹配表达式的值与 switch 表达式的值匹配，相应的内部元素就会添加到 DOM 中。 所有其他内部元素都将从 DOM 中删除

如果存在多个匹配项，则所有匹配的元素都将添加到 DOM 中。

ngSwitchDefault

您也可以在 Angular 8 中应用 ngSwitchDefault 指令。 只有在未找到匹配项时，才会显示带有 ngSwitchDefault 的元素。 带有 ngSwitchDefault 的内部元素可以放置在容器元素内的任何位置，而不一定位于底部。 如果您添加多个 ngSwitchDefault 指令，则会显示所有这些指令。

放置在容器元素内但在 ngSwitchCase 或 ngSwitchDefault 元素之外的任何元素都将按原样显示。

ngSwitch 指令示例

在应用程序的 app.component.ts 文件中使用以下代码

在应用程序的 app.component.html 文件中使用以下代码