如果当前事件选项卡中的表单很脏,我试图阻止 mat-tab
的选项卡更改。
但是我找不到拦截选项卡更改事件的方法。
<mat-tab-group>
<mat-tab label="Tab 0" >
// Tab 0 Content
</mat-tab>
<mat-tab label="Tab 1" >
// Tab 1 Content
</mat-tab>
<mat-tab label="Tab 2" >
// Tab 2 Content
</mat-tab>
</mat-tab-group>
即使有
selectedTabChange
事件,我们也无法阻止选项卡更改。我们只能在选项卡更改后以编程方式切换选项卡。我有一个技巧可以使它成为可能。如果有人遇到相同的情况,请在此处发布以提供帮助。
最佳答案
此解决方案只是一种变通方法,并且有其缺陷。它在下面提到。
步骤:
在模板 中:
<mat-tab label="Tab 0" disabled>
还使用组件类中的变量设置
selectedIndex
属性。<mat-tab-group (click)="tabClick($event)" [selectedIndex]="selectedTabIndex">
在组件类 中:
selectedTabIndex
selectedTabIndex = 0;
getTabIndex(tabName: string): number {
switch (tabName) {
case 'Tab 0': return 0;
case 'Tab 1': return 1;
case 'Tab 2': return 2;
default: return -1; // return -1 if clicked text is not a tab label text
}
}
我们可以从 click 事件的一个属性中获取 tab-label 文本`clickEventName.toElement.innerText`
tabClick(clickEvent: any) {
// Get the index of clicked tab using the above function
const clickedTabIndex = this.getTabIndex(clickEvent.toElement.innerText);
// if click was not on a tab label, do nothing
if (clickedTabIndex === -1) {
return;
}
// if current tab is same as clicked tab, no need to change.
//Otherwise check whether editing is going on and decide
if (!(this.selectedTabIndex === clickedTabIndex)) {
if ( /*logic for form dirty check*/ ) {
// if form is dirty, show a warning modal and don't change tab.
}
else {
// if form is not dirty, change the tab
this.selectedTabIndex = clickedTabIndex;
}
}
}在我的情况下,每个选项卡内容都在单独的组件中。所以我使用
@ViewChild
来访问它们并检查任何表单是否脏。缺陷 :
其他选项卡的标题。
因此它可能会触发选项卡更改。如果可能,您可以在单击事件中查找其他属性以防止出现这种情况。
我在
tabClick()
方法的开头使用了以下代码 if (!((clickEvent.toElement.className).toString().includes('mat-tab-label'))) {
return;
}
css
的 disabled
状态的 mat-tab
以使其看起来自然模板 :
<mat-tab-group (click)="tabClick($event)" [selectedIndex]="selectedTabIndex">
<mat-tab label="Tab 0" disabled>
// Tab 0 Content
</mat-tab>
<mat-tab label="Tab 1" disabled>
// Tab 1 Content
</mat-tab>
<mat-tab label="Tab 2" disabled>
// Tab 2 Content
</mat-tab>
</mat-tab-group>
关于 Angular Material 选项卡 : Prevent tab change of mat-tab-group if the form in current tab is dirty,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56607394/