angular - Angular Material Tab：如果当前选项卡中的表单脏了，则防止 mat-tab-group 的选项卡更改

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

此解决方案只是一种解决方法，并且有其缺陷。下面会提到。

脚步 ：

在模板中：

1. 禁用 mat-tab-group 的所有选项卡 <mat-tab label="Tab 0" disabled>

2. 在 mat-tab-group 上提供单击事件处理程序。还可以selectedIndex使用组件类中的变量设置属性。

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

在组件类中：

1. 声明变量selectedTabIndex
selectedTabIndex = 0;

2. 创建一个方法来获取选项卡索引，提供选项卡标签。

    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`
   

3. 在 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访问它们并检查任何表单是否脏。

缺陷：

1. 由于此方法使用单击元素的文本来切换选项卡，因此您的一个选项卡可能包含一些文本内容与其他选项卡标题相同的元素。

   所以它可能会触发标签更改。如果可能，您可以在单击事件中查找其他属性以防止出现这种情况。tabClick()我在方法的开头使用了以下代码

    if (!((clickEvent.toElement.className).toString().includes('mat-tab-label'))) {
     return;
     }
   

2. 您可能需要覆盖cssofdisabled状态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>