[解決済み] Mat-tab-groupを使用してAngular 2のマテリアルでmat-tabをプログラム的に選択する

質問

イベント発生時に特定のタブを選択するにはどうしたらよいですか。

試しに [selectedIndex]="selectedTab" を変更し selectedTab をタブのインデックスに変更する必要がありますが、タブが読み込まれた後ではうまくいかないようです。

どのように解決するのですか？

UPDATE (最新のangular+materialを使用)

複数の方法があります...

1. 双方向のデータバインディングを使用した、可能な解決策

<button mat-raised-button (click)="demo1BtnClick()">Tab Demo 1!</button>
<mat-tab-group [(selectedIndex)]="demo1TabIndex">
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
    <mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>

public demo1TabIndex = 1;
public demo1BtnClick() {
  const tabCount = 3;
  this.demo1TabIndex = (this.demo1TabIndex + 1) % tabCount;
}

1. テンプレート変数を使用して、私たちのクリック関数に渡すことが可能なソリューションです。

<button mat-raised-button (click)="demo2BtnClick(demo2tab)">Tab Demo 2!</button>
<mat-tab-group #demo2tab>
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

public demo2BtnClick(tabGroup: MatTabGroup) {
  if (!tabGroup || !(tabGroup instanceof MatTabGroup)) return;

  const tabCount = tabGroup._tabs.length;
  tabGroup.selectedIndex = (tabGroup.selectedIndex + 1) % tabCount;
}

1. ViewChildを使用した、可能な解決策

<button mat-raised-button (click)="demo3BtnClick()">Tab Demo 3!</button>
<mat-tab-group #demo3Tab>
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

@ViewChild("demo3Tab", { static: false }) demo3Tab: MatTabGroup;

public demo3BtnClick() {
  const tabGroup = this.demo3Tab;
  if (!tabGroup || !(tabGroup instanceof MatTabGroup)) return;

  const tabCount = tabGroup._tabs.length;
  tabGroup.selectedIndex = (tabGroup.selectedIndex + 1) % tabCount;
}

live-demo。 https://stackblitz.com/edit/angular-selecting-mattab?file=src%2Fapp%2Fapp.component.ts