使用mat-tab-group以编程方式在Angular 2材质中选择mat-tab [英] Programmatically select mat-tab in Angular 2 material using mat-tab-group

问题描述

事件发生后如何选择特定的选项卡?

How can I select a specific tab when an event occurs?

我尝试了[selectedIndex]="selectedTab"将selectedTab更改为所需的选项卡索引，但是在加载选项卡后似乎不起作用.

I tried with [selectedIndex]="selectedTab" changing the selectedTab to the tab index needed but it doesn't seems to work after the tabs are loaded.

推荐答案

更新(使用最新的angular + material)

有多种方法.

1. 可能的解决方案，使用双向数据绑定

<button mat-raised-button (click)="demo1BtnClick()">Tab Demo 1!</button>
<mat-tab-group [(selectedIndex)]="demo1TabIndex">
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
    <mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>

public demo1TabIndex = 1;
public demo1BtnClick() {
  const tabCount = 3;
  this.demo1TabIndex = (this.demo1TabIndex + 1) % tabCount;
}

1. 可能的解决方案，使用模板变量并通过我们的点击功能

<button mat-raised-button (click)="demo2BtnClick(demo2tab)">Tab Demo 2!</button>
<mat-tab-group #demo2tab>
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

public demo2BtnClick(tabGroup: MatTabGroup) {
  if (!tabGroup || !(tabGroup instanceof MatTabGroup)) return;

  const tabCount = tabGroup._tabs.length;
  tabGroup.selectedIndex = (tabGroup.selectedIndex + 1) % tabCount;
}

1. 可能的解决方案，使用@ViewChild

<button mat-raised-button (click)="demo3BtnClick()">Tab Demo 3!</button>
<mat-tab-group #demo3Tab>
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

@ViewChild("demo3Tab", { static: false }) demo3Tab: MatTabGroup;

public demo3BtnClick() {
  const tabGroup = this.demo3Tab;
  if (!tabGroup || !(tabGroup instanceof MatTabGroup)) return;

  const tabCount = tabGroup._tabs.length;
  tabGroup.selectedIndex = (tabGroup.selectedIndex + 1) % tabCount;
}

实时演示: https://stackblitz.com/edit/angular-selecting-mattab?file=src%2Fapp%2Fapp.component.ts

这篇关于使用mat-tab-group以编程方式在Angular 2材质中选择mat-tab的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！