angular - 使用 angular-mat-tab 从选项卡 1 上的按钮切换到选项卡 2

Question

我正在使用有角度的材料 mat-tab 内容。

我的代码看起来像 -

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

我想实现类似的东西

<mat-tab-group>
  <mat-tab label="First">
      <button mat-button>Go to tab 2</button>
      <button mat-button>Go to tab 3</button>
  </mat-tab>
  <mat-tab label="Second"> 
      <button mat-button>Go to tab 1</button>
  </mat-tab>
  <mat-tab label="Third">
      <button mat-button>Go to tab 1</button>
  </mat-tab>
</mat-tab-group>

如何实现单击按钮的此功能，它应该转到不同的选项卡？

标签： angularangular-materialmat-tab

Answer 1

我们可以使用选项卡组模板引用来更改选项卡的选定索引

<mat-tab-group #tabGroup>
  <mat-tab label="First">
     <button mat-button (click)="tabGroup.selectedIndex=1">Go to tab 2</button>
     <button mat-button (click)="tabGroup.selectedIndex=2">Go to tab 3</button>
  </mat-tab>
  <mat-tab label="Second"> 
     <button mat-button (click)="tabGroup.selectedIndex=0">Go to tab 1</button>
  </mat-tab>
  <mat-tab label="Third">
     <button mat-button (click)="tabGroup.selectedIndex=0">Go to tab 1</button>
  </mat-tab>
</mat-tab-group>