Переключитесь на вкладку 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>

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

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

Jojofoulk 28.05.2019 07:00
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
3
1
2 740
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Другие вопросы по теме