如何從一個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