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

Question

我正在使用 angular material 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>

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

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>

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

Switch to tab 2 from a button on tab 1 using angular-mat-tab

angular-material

angular

mat-tab