md-dialog内のアクティブなmd-tab md-tab-groupを選択

Question

2つのタブを持つmd-tab-groupを含むmd-dialogを開く必要があります。 mdダイアログは、対応するタブを開く2つのボタンから開くことができます。 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

[selectedIndex]という属性を<md-tab-group>とする必要があります。 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を引いなぜ、thatsのことを覚えておいてください：[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>