Question

如果当前活动标签页中的表单不干净，我试图阻止更改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事件，我们也不能阻止制表符更改。我们只能在更改标签后以编程方式切换标签。

我有办法使之成为可能。如果有人遇到相同的问题，只需在此处发布即可。

Answer 1

此解决方案仅是一种破解，并且存在缺陷。在下面提到。

步骤：

在模板中：

禁用mat-tab-group的所有选项卡 <mat-tab label="Tab 0" disabled>
在mat-tab-group上提供click事件处理程序。还要使用组件类中的变量设置selectedIndex属性。

<mat-tab-group (click)="tabClick($event)" [selectedIndex]="selectedTabIndex">

在Component类中：

声明变量selectedTabIndex
selectedTabIndex = 0;

创建一种方法来获取标签Index，并提供标签标签。

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
 }

}

我们可以从点击事件的属性中获取标签标签文本

clickEventName.toElement.innerText

创建用于处理mat-tab-group上的click事件的方法。

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来访问它们，并检查任何表单是否脏了。

缺陷：

由于此方法使用clicked元素的文本来切换标签，因此您的一个标签可能包含某些元素，其文本内容与其他标签的标题。

因此它可能会触发选项卡更改。您可以在click事件中查找其他属性，以防止出现这种情况（如果可能）。（或者在元素的文本中简单添加前导或尾随空格也可以解决此问题）
您可能需要覆盖css的{{1}}状态的disabled，以使其看起来自然

模板：

mat-tab

Angular Material选项卡：如果当前选项卡中的表单不干净，则防止更改mat-tab-group的选项卡

1 个答案: