Angular Material选项卡:如果当前选项卡中的表单较脏,则防止更改mat-tab-group的选项卡 [英] Angular Material Tab : Prevent tab change of mat-tab-group if the form in current tab is dirty
问题描述
如果当前活动的选项卡中的表单不干净,我试图防止更改mat-tab
的选项卡.
I was trying to prevent tab change of mat-tab
, if the form in currently active tab is dirty.
但是我找不到一种方法来拦截制表符更改事件.
But I couldn't find a way to intercept the tab change event.
<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
事件,我们也不能阻止制表符更改.我们只能在更改标签后以编程方式切换标签.
Even though there is a selectedTabChange
event, we can't prevent tab change. we can only switch tab programatically after tab change.
我有办法使之成为可能.如果有人遇到相同的问题,只需在此处发布即可.
I have got a hack to make it possible. Just posting here to help if someone encounters the same.
推荐答案
此解决方案仅是一种破解,并且有其缺陷.在下面提到.
This solution is just a hack and has its flaws. It is mentioned below.
步骤:
在模板中:
- 禁用mat-tab-group的所有选项卡
<mat-tab label="Tab 0" disabled>
-
在mat-tab-group上提供click事件处理程序. 还要使用组件类中的变量设置
selectedIndex
属性.
- Disable all tabs of the mat-tab-group
<mat-tab label="Tab 0" disabled>
Provide a click event handler on mat-tab-group. Also set the
selectedIndex
property using a variable from the component class.
<mat-tab-group (click)="tabClick($event)" [selectedIndex]="selectedTabIndex">
在Component类中:
-
声明变量
selectedTabIndex
selectedTabIndex = 0;
创建一种方法来获取标签Index,并提供标签标签.
Create a method to get the tab Index , provided the tab label.
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
}
}
我们可以从点击事件的属性中获取标签标签文本
We can get the tab-label text from a property of the click event
clickEventName.toElement.innerText
创建用于处理mat-tab-group上的click事件的方法.
Create the method for handling the click event on mat-tab-group.
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
来访问它们,并检查任何表单是否脏了.
In my case each tab content was in separate components. So I used @ViewChild
to access them and check whether any of the form is dirty or not.
缺陷:
-
由于此方法使用clicked元素的文本来切换选项卡,因此您的一个选项卡可能包含一些文本内容与以下内容相同的元素 其他标签的标题.
Since this method uses the text of clicked element for switching tabs, there is a chance that one of your tab may contain some element with text content same as the heading of other tabs.
因此它可能会触发选项卡更改.您可以在click事件中查找其他属性,以防止出现这种情况(如果可能).
我在tabClick()
方法的开头
So it may trigger a tab change. You can look for other properties in click event to prevent this scenario if possible.
I used following code in tabClick()
method's beginning
if (!((clickEvent.toElement.className).toString().includes('mat-tab-label'))) {
return;
}
您可能需要覆盖mat-tab
的disabled
状态的css
以使其看起来自然
You may need to override the css
of disabled
state of mat-tab
to make it look natural
模板:
<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选项卡:如果当前选项卡中的表单较脏,则防止更改mat-tab-group的选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!