如何在 MatTabChangeevent 之前调用函数？

Question

我有一个 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);
         }
       });
     }
   }

Answer 1

遗憾的是，这在本机不可用。 angular 团队避免了 'cancellation' 事件。

在 angular 团队工作的 Jeremy 提到另一种方法是使用 mat-tab-nav-bar 并将页面视为路由。:

We've always avoided APIs in Angular CDK/Material that allow "cancelling" actions. The reasoning: The accessibility of "cancelling" is tricky- it's hard to communicate to screen-reader users that the expected action didn't happen and why. This would be especially true with e.g. tabs, where it would be very easy to throw off the interaction pattern if you interrupt an expected action with a dialog. There's no clear line on which actions would be cancellable and which aren't from an API consistency standpoint. It generally makes the library code more complex and harder to reason about It makes any "cancellable" interaction asynchronous This issue will stay open for conversation for now, but we don't have any plans to start adding cancellation APIs to the library. It's worth mentioning that, if you use mat-tab-nav-bar, you can treat the pages as separate routes, so that you can use route guards.

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

其他参考资料：https://github.com/angular/components/issues/2008

如何在 MatTabChangeevent 之前调用函数？

How to call function before MatTabChange event?

event-handling

typescript

angular-material

angular