在md对话框中选择活动的md-tab md-tab-group

Question

我必须打开一个包含具有两个选项卡的md-tab-group的md对话框。该md对话框可以打开两个按钮，应该打开相应的选项卡。 从那里打开了MD-对话框模板：

<button md-button class="" (click)="openDialog(1)">open tab 1</button> 
<button md-button class="" (click)="openDialog(2)">open tab 2</button> 

的component.ts：

openDialog(type) { 

     var data: any = {}; 
     data.type = type; 

     let dialogRef = this.dialog.open(TwoTabDialog, {height: 'auto', width: '529px', data: data}); 
     dialogRef.afterClosed().subscribe(result => {});  
    } 

，并在对话框的模板：

<md-tab-group class="follow-dialog"> 
<md-tab label="tab 1" id="followers-tab" md-active="data.type == 1">        
    tab 1 content 
</md-tab> 
<md-tab label="tab 2" id="following-tab" md-active="data.type == 2">        
    tab 2 content 
</md-tab> 

的问题是该标签1始终打开。

Answer 1

您需要使用<md-tab-group>的[selectedIndex]属性。假设data.type代表tabIndex，你可以做到以下几点：

<md-tab-group class="follow-dialog" [selectedIndex]="data?.type-1"> 
    <md-tab label="tab 1" id="followers-tab"> 
     tab 1 content 
    </md-tab> 
    <md-tab label="tab 2" id="following-tab"> 
     tab 2 content 
    </md-tab> 
</md-tab-group> 

取出md-active表达，你不需要这个。请记住，标签的指数从0开始的，这就是为什么在这个表达式中减去1：[selectedIndex]="data?.type-1"

链接Plunker Demo

Answer 2

试试这个：

openDialog(tab: number) { 
    let dialogRef = this.dialog.open(TwoTabDialog); 
    this.dialogRef.componentInstance.activeTab = tab - 1; 
    dialogRef.afterClosed().subscribe(result => {});  
} 

<md-tab-group [selectedIndex]="activeTab"> 
    <md-tab label="tab 1" id="followers-tab">        
     tab 1 content 
    </md-tab> 
    <md-tab label="tab 2" id="following-tab">        
     tab 2 content 
    </md-tab> 
</md-tab-group>