Angular Material選項卡：如果當前選項卡中的表單不干凈，則防止更改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

該解決方案只是一個hack，並且存在缺陷。 在下面提到。

腳步 ：

在模板中 ：

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

2. 在mat-tab-group上提供一個click事件處理程序。 還使用組件類中的變量設置selectedIndex屬性。

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

在Component類中 ：

1. 聲明變量selectedTabIndex
selectedTabIndex = 0;

2. 創建一個方法以獲取標簽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 } } 

   我們可以從click事件的屬性中獲取標簽標簽文本

   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. 由於此方法使用clicked元素的文本來切換選項卡，因此您的一個選項卡可能包含一些文本內容與其他選項卡的標題相同的元素。

   因此，它可能會觸發選項卡更改。 您可以在click事件中查找其他屬性，以防止出現這種情況（如果可能）。 我在tabClick()方法的開頭使用了以下代碼

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

2. 您可能需要覆蓋mat-tab的disabled狀態的css才能使其看起來自然

范本 ：

<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>