Angular自定义ErrorHandler异步打开的MatDialog点击一次无法关闭如何解决

根因说明 #

Angular自定义ErrorHandler捕获的所有错误（包含HTTP异步报错、Promise异常、Observable抛出的错误等），默认执行上下文脱离Angular的NgZone管控。此时直接调用MatDialog.open()打开弹窗，弹窗的实例初始化、事件绑定逻辑全部运行在Zone之外，点击关闭按钮的事件虽能触发，但关联的Angular变更检测不会自动执行，导致关闭逻辑对应的DOM更新未生效，看起来就像点击无响应，直到点击弹窗外部区域触发全局事件，才会拉动积压的变更检测执行，完成弹窗关闭。

修复方案 #

修改自定义ErrorHandlerService，注入NgZone后将打开弹窗的逻辑包裹在NgZone.run()中，强制该逻辑回到Angular上下文执行即可。该方案无需修改原有弹窗组件的代码，即可支持异步错误场景下点击一次按钮正常关闭弹窗。

修改后的代码如下：

import { Injectable, NgZone, ErrorHandler } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { AlertDialog } from './alert-dialog.component'; // 替换为实际的AlertDialog导入路径

@Injectable({
  providedIn: 'root'
})
export class ErrorHandlerService extends ErrorHandler {
  constructor(
    private dialog: MatDialog,
    private ngZone: NgZone
  ) {
    super();
  }

  handleError(err: any): void {
    console.error(err);
    // 包裹在NgZone.run中回到Angular上下文执行
    this.ngZone.run(() => {
      this.dialog.open(AlertDialog, {
        data: { message: err.message }
      });
    });
  }
}

内容的提问来源于stack exchange，提问作者Nickolas Hook