使用多个结构指令

有时我们想要将多个结构指令结合在一起,例如使用ngFor进行迭代,但想要执行ngIf以确保值匹配一些或多个条件。 组合结构指令可能会导致意想不到的结果,因此Angular要求模板一次只能绑定到一个指令。 要应用多个指令,我们必须扩展含糖语法或嵌套模板标签。

  1. @Component({
  2. selector: 'app-root',
  3. template: `
  4. <template ngFor [ngForOf]="[1,2,3,4,5,6]" let-item>
  5. <div *ngIf="item > 3">
  6. {{item}}
  7. </div>
  8. </template>
  9. `
  10. })

View Example

如果选项卡标题和内容被抽象到组件类中,下面的选项卡示例可以使用ngForngSwitch

  1. import {Component} from '@angular/core';
  2. @Component({
  3. selector: 'app-root',
  4. template: `
  5. <div class="tabs-selection">
  6. <tab
  7. *ngFor="let tab of tabs; let i = index"
  8. [active]="isSelected(i)"
  9. (click)="setTab(i)">
  10. {{ tab.title }}
  11. </tab>
  12. </div>
  13. <div [ngSwitch]="tabNumber">
  14. <template ngFor [ngForOf]="tabs" let-tab let-i="index">
  15. <tab-content *ngSwitchCase="i">
  16. {{tab.content}}
  17. </tab-content>
  18. </template>
  19. <tab-content *ngSwitchDefault>Select a tab</tab-content>
  20. </div>
  21. `
  22. })
  23. export class AppComponent {
  24. tabNumber: number = -1;
  25. tabs = [
  26. { title: 'Tab 1', content: 'Tab content 1' },
  27. { title: 'Tab 2', content: 'Tab content 2' },
  28. { title: 'Tab 3', content: 'Tab content 3' },
  29. ];
  30. setTab(num: number) {
  31. this.tabNumber = num;
  32. }
  33. isSelected(num: number) {
  34. return this.tabNumber === i;
  35. }
  36. }

View Example