如何从一个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> 

我所需要的功能showTab1（）切换到标签1，如果我在标签1和showTab2（）如果按钮被点击时执行。谁能帮忙？

Answer 1

您需要声明一个变量，例如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 2

可以使用[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