使用 mat-tab-group 以编程方式选择 Angular 2 材料中的 mat-tab
问题描述:
如何在事件发生时选择特定选项卡?
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.
答
UPDATE(使用最新的 angular+material)
有多种方法..
- 可能的解决方案,使用双向数据绑定
<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;
}
- 可能的解决方案,使用模板变量并通过我们的点击函数
<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;
}
- 可能的解决方案,使用@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