Select 在 md-dialog 中激活 md-tab md-tab-group

Question

我必须打开一个 md-dialog，其中包含一个带有两个选项卡的 md-tab-group。 md-dialog 可以从两个按钮打开，这两个按钮应该打开相应的选项卡。打开 md-dialog 的模板：

<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"

Link 到 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>

Select 在 md-dialog 中激活 md-tab md-tab-group

Select active md-tab md-tab-group inside md-dialog

javascript

angular-material

angular-material2

angular