模板语法
服务端渲染
API / @angular/common

NgSwitch

Adds / removes DOM sub-trees when the nest match expressions matches the switch expression.

根据内嵌的 match（匹配）表达式（match_express_*）与 switch（多路开关）表达式（switch_expression）的匹配结果，添加 / 删除 DOM 子树。

@Directive({ selector: '[ngSwitch]' }) class NgSwitch { set ngSwitch: any }

选择器

[ngSwitch]

输入参数

ngSwitch 绑定到 NgSwitch.ngSwitch

说明

NgSwitch stamps out nested views when their match expression value matches the value of the switch expression.

当 match 表达式的值与 switch 表达式的值匹配时 NgSwitch 就会将其内嵌的视图 "印" 出来。

In other words:

换句话说：

  • you define a container element (where you place the directive with a switch expression on the [ngSwitch]="..." attribute)

    你定义了一个容器元素（也就是你通过 [ngSwitch]="..." 属性来放置 switch 表达式的那个元素。

  • you define inner views inside the NgSwitch and place a *ngSwitchCase attribute on the view root elements.

    你在 NgSwitch 中定义了内嵌视图，并把 *ngSwitchCase 属性放在了视图的根元素上。

Elements within NgSwitch but outside of a NgSwitchCase or NgSwitchDefault directives will be preserved at the location.

NgSwitch 中位于 NgSwitchCase 或 NgSwitchDefault 指令之外的那些元素会保留在原地。

The ngSwitchCase directive informs the parent NgSwitch of which view to display when the expression is evaluated. When no matching expression is found on a ngSwitchCase view, the ngSwitchDefault view is stamped out.

在表达式求值完成之后，ngSwitchCase 指令会告诉付指令 NgSwitch 要显示哪个视图。 如果 ngSwitchCase 中没有找到匹配的表达式，就会显示 ngSwitchDefault 视图。

属性

属性名类型说明
ngSwitch

使用说明

<container-element [ngSwitch]="switch_expression"> <some-element *ngSwitchCase="match_expression_1">...</some-element> <some-element *ngSwitchCase="match_expression_2">...</some-element> <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element> <ng-container *ngSwitchCase="match_expression_3"> <!-- use a ng-container to group multiple root nodes --> <inner-element></inner-element> <inner-other-element></inner-other-element> </ng-container> <some-element *ngSwitchDefault>...</some-element> </container-element>