Angular10 NgSwitch 指令介绍

在 Angular10 中，ngSwitch 指令用于根据不同的条件显示不同的 HTML 内容。ngSwitch 会根据绑定的值对其子元素进行匹配，以决定哪个子元素需要被显示。

ngSwitch 语法

ngSwitch 指令会在包含它的元素上创建一个作用域，该作用域中包含了两个模板变量：ngSwitch 和 ngSwitchCase。ngSwitch 用于绑定值，ngSwitchCase 用于匹配这个值。

<div [ngSwitch]="value">
  <div *ngSwitchCase="'case-value-1'">Content for case value 1</div>
  <div *ngSwitchCase="'case-value-2'">Content for case value 2</div>
  <div *ngSwitchCase="'case-value-3'">Content for case value 3</div>
  <div *ngSwitchDefault>Default content</div>
</div>

在上面的例子中，首先绑定了 value 变量到 ngSwitch 上，然后在子元素中使用 *ngSwitchCase 来匹配各个条件。最后使用 *ngSwitchDefault 来设置默认的内容。

ngSwitch 示例

下面是一个使用 ngSwitch 的例子，通过点击按钮来切换不同的条件。点击 Show Value 1、Show Value 2、Show Value 3 将显示三个条件的不同内容：

<div [ngSwitch]="selectedValue">
  <div *ngSwitchCase="'value1'">Content for value 1</div>
  <div *ngSwitchCase="'value2'">Content for value 2</div>
  <div *ngSwitchCase="'value3'">Content for value 3</div>
  <div *ngSwitchDefault>No content</div>
</div>

<button (click)="selectedValue='value1'">Show Value 1</button>
<button (click)="selectedValue='value2'">Show Value 2</button>
<button (click)="selectedValue='value3'">Show Value 3</button>

在上面的例子中，按钮点击会改变 selectedValue 变量的值，从而触发 ngSwitch 的条件匹配和内容切换。

总结

ngSwitch 指令非常实用，可以根据不同的条件来决定不同的内容。使用 ngSwitchCase 和 ngSwitchDefault 可以实现更复杂的条件匹配和内容分发。