如何在 MatTabChange 事件之前调用函数？

如何解决如何在 MatTabChange 事件之前调用函数？

我有一个 mat-tab-group，其中每个选项卡都有一个具有自己状态的组件，我正在使用 hasChanges 属性处理组件的状态，该属性告诉我该组件是否有任何待处理的更改得救。

我正在尝试向用户显示一个对话框或警报，如果他们在未保存更改的情况下决定移动到另一个选项卡，那么我可以提示他们保存这些更改或放弃它们；但是，MatTabChangeEvent 仅包含我尝试移动到的选项卡的信息，并且事件会在运行我编写的关于事件处理的任何代码之前执行操作。

有没有办法在选项卡选择发生之前运行我的代码？

我的一些代码：

 onTabChanged(event: MatTabChangeEvent) {
     const i = event.index;
 
     if (this.reportPage.hasChanges) {
       const dialogRef = this.dialog.open(DialogConfirmComponent);
 
       dialogRef.afterClosed().subscribe(res => {
         if (res) {
           console.log(res);
         } else {
           this.getPage(i,this.report.pages[i].id);
         }
       });
     }
   }

解决方法

不幸的是，这在本地不可用。角度团队避免了事件的“取消”。

根据在 angular 团队工作的 Jeremy，他提到另一种选择是使用 mat-tab-nav-bar 并将页面视为路由。：

我们一直避免在 Angular CDK/Material 中使用允许“取消”操作的 API。推理： “取消”的可访问性很棘手 - 很难向屏幕阅读器用户传达预期的操作没有发生以及原因。这对于例如尤其如此。选项卡，如果您使用对话框中断预期的操作，则很容易摆脱交互模式。 从 API 一致性的角度来看，哪些操作可以取消，哪些不是可以取消的，没有明确的界限。 它通常会使库代码更加复杂且难以推理 它使任何“可取消”的交互异步 这个问题现在将保持开放以供讨论，但我们没有任何计划开始向库中添加取消 API。值得一提的是，如果使用mat-tab-nav-bar，可以将页面视为单独的路由，这样就可以使用路由守卫了。

https://github.com/angular/components/issues/2013#issuecomment-623662518

附加参考：https://github.com/angular/components/issues/2008