Переключитесь на вкладку 2 с помощью кнопки на вкладке 1, используя angular-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>

Как реализовать эту функцию, когда при нажатии на кнопки он должен переходить на разные вкладки?


angular angular-material mat-tab
person cvg    schedule 28.05.2019    source источник
comment
Взгляните на документацию, там есть пример изменения вкладки по-другому: material.angular.io / components / tabs / examples. Я считаю, что <mat-tab-group [selectedIndex]="YourValue" (selectedIndexChange)=YourFunction($event) решает вашу проблему   -  person Jojofoulk    schedule 28.05.2019

Ответы (1)


arrow_upward
4
arrow_downward

Мы можем использовать ссылку на шаблон группы вкладок, чтобы изменить выбранный индекс вкладки.

<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>
person Veeraragavan    schedule 28.05.2019