Переключитесь на вкладку 2 с кнопки на вкладке 1 с помощью angular-mat-tab - PullRequest
Новая
       22

Переключитесь на вкладку 2 с кнопки на вкладке 1 с помощью angular-mat-tab

0 голосов
/ 28 мая 2019

Я использую угловой материал табуляции.

Мой код выглядит как - 

<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>

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

1 Ответ

1 голос
/ 28 мая 2019

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

<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>
...