如何在打字稿中從一個 Angular 2 材料選項卡切換到另一個？

Question

我有兩個標簽和兩個按鈕

<md-tab-group>
<md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>
<button md-button (click)="showTab1()">Show Tab 1</button>
 <button md-button (click)="showTab2()">Show Tab 2</button>

如果我在選項卡 1 上，我需要函數 showTab1() 切換到選項卡 1，如果單擊按鈕，則需要執行 showTab2()。 任何人都可以幫忙嗎？

Answer 1

您可以將[selectedIndex] @Input用於mat-tab-group ：

零件：

selectedIndex = 0;

selectTab(index: number): void {
  this.selectedIndex = index;
}

模板：

<mat-tab-group [selectedIndex]="selectedIndex">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

<button mat-button (click)="selectTab(0)">Show Tab 1</button>
<button mat-button (click)="selectTab(1)">Show Tab 2</button>

STACKBLITZ DEMO

...或者您可以創建對mat-tab-group的引用並直接在模板中操作它：

<mat-tab-group #tabGroup>
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

<button mat-button (click)="tabGroup.selectedIndex = 0">Show Tab 1</button>
<button mat-button (click)="tabGroup.selectedIndex = 1">Show Tab 2</button>

STACKBLITZ DEMO

Answer 2

您需要聲明一個變量，例如tab: number = 1 。 然后，您可以創建模板，如：

<md-tab-group>
<md-tab *ngIf="tab==1" label="Tab 1">Content 1</md-tab>
  <md-tab *ngIf="tab==2" label="Tab 2">Content 2</md-tab>
</md-tab-group>
<button md-button (click)="tab=1">Show Tab 1</button>
 <button md-button (click)="tab=2">Show Tab 2</button>

Answer 3

在 TS

  @ViewChild('tabGroup') tabGroup;

  ngAfterViewInit(): void {
    this.selected_tab_label = this.tabGroup._allTabs._results[this.selectedIndex].textLabel;
  }