NgSwitchlink

说明link

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

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

换句话说：

In other words:

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

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

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

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

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

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

在表达式求值完成之后，ngSwitchCase 指令会告诉付指令 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.

      
        content_copy
      
      <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>