填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

NgSwitch

容器上的 [ngSwitch] 指令指定要匹配的表示式。匹配的表示式由容器內檢視上的 ngSwitchCase 指令提供。

The [ngSwitch] directive on a container specifies an expression to match against. The expressions to match are provided by ngSwitchCase directives on views within the container.

檢視"說明"...

參見

Exported from

選擇器

屬性

屬性說明
@Input()
ngSwitch: any
只寫

說明

為指令定義一個容器元素,並指定要匹配的 switch 表示式作為屬性:

Define a container element for the directive, and specify the switch expression to match against as an attribute:

      
      <container-element [ngSwitch]="switch_expression">
    

在容器內, *ngSwitchCase 語句將匹配表示式指定為屬性。包括用 *ngSwitchDefault 作為最後一種情況。

Within the container, *ngSwitchCase statements specify the match expressions as attributes. Include *ngSwitchDefault as the final case.

      
      <container-element [ngSwitch]="switch_expression">
   <some-element *ngSwitchCase="match_expression_1">...</some-element>
...
   <some-element *ngSwitchDefault>...</some-element>
</container-element>
    

使用範例

Usage Examples

下面的示例示範如何使用多個分支來顯示同一檢視:

The following example shows how to use more than one case to display the same view:

      
      <container-element [ngSwitch]="switch_expression">
  <!-- the same view can be shown in more than one case -->
  <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>
  <!--default case when there are no matches -->
  <some-element *ngSwitchDefault>...</some-element>
</container-element>
    

以下示例示範如何巢狀案例:

The following example shows how cases can be nested:

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