NgSwitch 指令

ngSwitch实际上包括两个指令，一个属性指令和一个结构指令。 它非常类似于JavaScript和其他编程语言中的switch语句，但是在模板中。

  1. @Component({
  2.   selector: 'app-root',
  3.   template: `
  4.     <div class="tabs-selection">
  5.       <app-tab [active]="isSelected(1)" (click)="setTab(1)">Tab 1</app-tab>
  6.       <app-tab [active]="isSelected(2)" (click)="setTab(2)">Tab 2</app-tab>
  7.       <app-tab [active]="isSelected(3)" (click)="setTab(3)">Tab 3</app-tab>
  8.     </div>
  10.     <div [ngSwitch]="tab">
  11.       <app-tab-content *ngSwitchCase="1">Tab content 1</app-tab-content>
  12.       <app-tab-content *ngSwitchCase="2">Tab content 2</app-tab-content>
  13.       <app-tab-content *ngSwitchCase="3"><app-tab-3></app-tab-3></app-tab-content>
  14.       <app-tab-content *ngSwitchDefault>Select a tab</app-tab-content>
  15.     </div>
  16.   `
  17. })
  18. export class AppComponent {
  19.   tab: number = 0;
  21.   setTab(num: number) {
  22.     this.tab = num;
  23.   }
  25.   isSelected(num: number) {
  26.     return this.tab === num;
  27.   }
  28. }

View Example

这里我们看到ngSwitch属性指令附加到一个元素。 该表达式绑定到指令定义什么将在 switch 指令中进行比较。 如果绑定到ngSwitchCase的表达式匹配给予ngSwitch的表达式，那么将创建这些组件，并销毁其他组件。 如果没有匹配的情况，则会创建与其绑定的ngSwitchDefault的组件，其他组件将被销毁。 注意，可以使用ngSwitchCase来匹配多个组件，在这些情况下，将创建所有匹配的组件。 由于组件被创建或销毁，请注意这样做的成本。