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

This solution is just a hack and has its flaws. It is mentioned below.

步骤:

在模板中:

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

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

1. Disable all tabs of the mat-tab-group <mat-tab label="Tab 0" disabled>

2. 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类中:

1. 声明变量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.

缺陷:

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

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