如何检测Angular模板中的错误？适配全局错误处理需求

我之前也碰到过一模一样的情况——全局错误处理器在非模板场景工作正常，但模板报错时，变更检测直接罢工，Material对话框空得离谱。本质原因是模板错误会直接中断Angular的变更检测循环，导致后续的数据绑定完全失效，动态内容根本渲染不出来。下面给你两个针对性的解决方案：

方案一：判断变更检测状态，降级到alert提示 #

我们可以在全局错误处理器里，通过检查错误上下文或者尝试触发变更检测来判断是否已经失效，一旦判定失效就直接用alert兜底：

import { ErrorHandler, Injectable, Injector, ChangeDetectorRef } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { YourDynamicErrorDialogComponent } from './your-dynamic-error-dialog.component';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  constructor(private injector: Injector) {}

  handleError(error: unknown): void {
    const dialog = this.injector.get(MatDialog);
    let isChangeDetectionBroken = false;

    // 尝试从错误上下文获取组件的变更检测引用
    const componentInstance = (error as any)?.ngDebugContext?.componentInstance;
    const cdRef = componentInstance?.['cdRef'] as ChangeDetectorRef | undefined;

    // 先尝试打开动态对话框，同时验证变更检测状态
    try {
      const dialogRef = dialog.open(YourDynamicErrorDialogComponent, {
        data: { error: (error as Error).message }
      });
      
      // 如果变更检测实例存在且未销毁，尝试触发一次检测
      if (cdRef && !cdRef['destroyed']) {
        cdRef.detectChanges();
      } else {
        isChangeDetectionBroken = true;
      }
    } catch (e) {
      // 打开对话框失败，说明变更检测已经挂了
      isChangeDetectionBroken = true;
    }

    // 变更检测失效时直接用alert提示
    if (isChangeDetectionBroken) {
      alert(`系统发生错误：${(error as Error).message}\n麻烦您反馈此问题，帮助我们尽快修复！`);
    }
  }
}

另外，你也可以通过错误的调用栈或ngDebugContext直接判断是不是模板错误——模板错误的调用栈里通常会包含ɵɵtemplate这类Angular内部模板处理函数，或者ngDebugContext里有templateNode属性，用这个判断会更直接：

const isTemplateError = (error as any)?.ngDebugContext?.templateNode !== undefined ||
                        (error as Error).stack?.includes('ɵɵtemplate');

if (isTemplateError) {
  // 直接用alert提示
}

方案二：创建静态模板的错误模态组件（备选兜底） #

如果觉得判断逻辑太繁琐，不如直接做一个完全静态的错误模态组件——因为没有任何数据绑定，即使变更检测失效，Angular也能正常渲染出静态内容：

首先创建静态组件：

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  template: `
    <h2 class="error-title">抱歉，系统出现了问题</h2>
    <p class="error-content">请您反馈此问题，我们会尽快修复！</p>
    <button mat-raised-button color="primary" (click)="closeDialog()">关闭</button>
  `,
  styles: [`
    .error-title { margin: 1rem 0; }
    .error-content { margin-bottom: 1.5rem; }
  `]
})
export class StaticErrorDialogComponent {
  constructor(private dialogRef: MatDialogRef<StaticErrorDialogComponent>) {}

  closeDialog(): void {
    this.dialogRef.close();
  }
}

然后在全局错误处理器里优先尝试动态对话框，失败就用静态兜底：

handleError(error: unknown): void {
  const dialog = this.injector.get(MatDialog);
  try {
    // 先尝试动态对话框
    dialog.open(YourDynamicErrorDialogComponent, {
      data: { error: (error as Error).message }
    });
  } catch (e) {
    // 动态对话框失败，打开静态兜底组件
    dialog.open(StaticErrorDialogComponent);
  }
}

这个方案的好处是不用复杂的判断逻辑，静态组件完全不依赖变更检测，只要Angular还能打开对话框，就能显示内容。

内容的提问来源于stack exchange，提问作者Blind Despair