有没有办法以编程方式更改激活的 mat-tab？

Question

我想在打字稿文件中更改激活的 mat-tab。这里以编程方式选择 Angular 2 材料中的 md-tab我找到了最接近的解决方案，但对于 md-tab 不是 mat-tab。我试过这个但没有工作。这里是我试过的HTML  <button class="btn btn-primary" (click)="changeTab()">Click me!</button>    <mat-tab-group [selectedIndex]="selectedTab">        <mat-tab label="Preview">     </mat-tab>        <mat-tab label="Tuning">        <car-tuning></car-tuning>        </mat-tab>        <mat-tab label="Payment"></mat-tab>       </mat-tab-group> .TS 文件 changeTab() {     this.selectedTab =1;}

Answer 1

您可以添加two way binding这样的 [(selectedIndex)]="selectedTab"，应该给你的结果。

<button class="btn btn-primary" (click)="changeTab()">Click me!</button>

<mat-tab-group [(selectedIndex)]="selectedTab"> //<--- changes

   <mat-tab label="Preview"> 

   </mat-tab>

   <mat-tab label="Tuning">

     <car-tuning></car-tuning>

   </mat-tab>

    <mat-tab label="Payment"></mat-tab> 

</mat-tab-group> 

在 ts：

changeTab() {

   this.selectedTab = 1 //<------- your tab value

}

Answer 2

是的，你可以这样改变。

<mat-tab-group [(selectedIndex)]="selectedIndex">

    <mat-tab>

    </mat-tab>

    <mat-tab>

    </mat-tab>

    <mat-tab>

    </mat-tab>

</mat-tab-group>

在 ts 中使用：

selectedIndex: number;

在你的函数中

this.selectedIndex = whateverIndexYouWant;

这是我从 ts 更改激活索引的方法。

this.data.currentMessage.subscribe(message => {

  switch (message) {

    case 'blabla':

      this.selectedIndex = 0;

      break;

    case 'blablablabla':

      this.selectedIndex = 1;

      break;

    case 'blablablablablabla':

      this.selectedIndex = 2;

      break;

  }

});