在md对话框中选择活动的md选项卡md选项卡组

Question

我必须打开一个md对话框，其中包含一个带有两个选项卡的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>

组件.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演示

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>