我想有条件地阻止用户导航到 mat-tab-group 中的其他选项卡。我发现一只猴子在这里打补丁如何有条件地阻止用户导航到 mat-tab-group 中的其他选项卡 https://stackoverflow.com/questions/51354135/how-to-conditionally-prevent-user-from-navigating-to-other-tab-in-mat-tab-group。但我想使用 mat-tab-group API 来实现这一点。我可以使用 focusChange 事件或 event.preventDefault 或任何其他方式来实现此目的吗?
这是例子https://stackblitz.com/edit/angular-mat-tab-focuschange-tphyvw https://stackblitz.com/edit/angular-mat-tab-focuschange-tphyvw
它很容易通过使用来实现@Output() selectedIndexChange: EventEmitter<number>
捕获选项卡更改尝试并使用@Input() selectedIndex: number | null
设置活动选项卡(如果您不希望选择新索引,则设置为当前选项卡索引)
<mat-tab-group #mtg (selectedIndexChange)="selectedIndexChange($event)">
<mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
Contents for {{tab}} tab
</mat-tab>
</mat-tab-group>
@ViewChild("mtg") tg: MatTabGroup;
tabs = ['First', 'Second', 'Third', "Fourth"];
current = 0;
selectedIndexChange(evt: any) {
if (evt % 2) {
this.tg.selectedIndex = this.current;
console.log("You cannot select even numbered tabs, sorry ^_^");
} else {
this.current = evt;
}
}
这是一个工作demo https://stackblitz.com/edit/angular-mat-tab-focuschange-gwx1rw
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)