如何在打字稿中从一个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>

如果我在Tab 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