Angular中Toast通知无法正常工作，需在Toast中展示错误信息

我来帮你梳理下这个问题——ng2-toasty的Toast不显示，通常是配置或代码细节没做到位，结合你给出的错误处理器代码，咱们一步步排查：

1. 确认ng2-toasty的基础配置是否齐全 #

首先得确保Toast有地方渲染，并且模块正确导入：

• 在你的根模块（比如AppModule）里，必须导入ToastyModule并调用forRoot()初始化：

  import { ToastyModule } from 'ng2-toasty';
  import { AppErrorHandler } from './app-error-handler';
  import { ErrorHandler } from '@angular/core';
  
  @NgModule({
    imports: [
      // ...其他模块（比如BrowserModule等）
      ToastyModule.forRoot()
    ],
    providers: [
      // 注册自定义错误处理器，替换Angular默认的
      { provide: ErrorHandler, useClass: AppErrorHandler }
    ]
  })
  export class AppModule { }
  

• 还要在你的根组件模板（比如app.component.html）里添加Toast的容器标签，否则Toast没地方渲染：

  <ng2-toasty></ng2-toasty>
  <!-- 其他组件内容 -->
  

2. 补全错误处理器的代码细节 #

你给出的handleError方法里，toastyService.error的参数对象和方法都没闭合，这会导致代码报错，先把代码补全：

import { ErrorHandler, Inject, NgZone } from "@angular/core";
import { ToastyService } from "ng2-toasty";

export class AppErrorHandler implements ErrorHandler {
  constructor(
    @Inject(NgZone) private ngZone: NgZone, 
    @Inject(ToastyService) private toastyService: ToastyService
  ){}

  handleError(error: any): void {
    // 用NgZone.run确保在Angular变更检测范围内执行，这一步你做的是对的
    this.ngZone.run(() => {
      this.toastyService.error({ 
        title: 'Error', 
        msg: 'An unexpected error happened', 
        theme: 'bootstrap',
        timeout: 5000, // 可选：设置Toast自动消失的时间（毫秒）
        showClose: true // 可选：显示关闭按钮
      });
    });

    // 别忘了把错误输出到控制台，方便调试
    console.error('捕获到未处理的错误:', error);
  }
}

3. 验证错误处理器是否被触发 #

如果Toast还是不显示，先确认自定义错误处理器有没有正常工作：
在handleError方法开头加一行日志，当错误发生时看控制台有没有输出：

handleError(error: any): void {
  console.log('AppErrorHandler已捕获错误:', error);
  // ...剩下的代码
}

如果没有这个日志，说明你没在模块的providers里正确注册AppErrorHandler，回到第一步检查配置。

4. 检查版本兼容性 #

确保ng2-toasty的版本和你当前的Angular版本兼容，比如Angular 10+可能需要使用适配的版本，版本不匹配会导致组件无法正常渲染。

按照上面的步骤排查下来，应该就能解决Toast不显示的问题啦！

内容的提问来源于stack exchange，提问作者saeef ahmed