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>

如何实现单击按钮后应转到其他选项卡的功能？

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>

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

1 个答案: