Angular 4项目中ng2-toastr在错误回调内失效问题求助

看起来你遇到的问题是ng2-toastr在HTTP请求的成功回调里正常工作，但错误回调里明明代码执行到了（console有输出），却没弹出提示。我之前也碰到过类似的情况，下面给你几个常见的解决方案：

1. 检查Angular Zone上下文（最常见原因） #

很多时候，第三方库的错误回调会跑出Angular的Zone之外，导致Angular的变更检测没触发，toastr的DOM更新就不会被渲染。解决方法是把toastr的调用包裹在NgZone的run方法里：

首先在组件里导入并注入NgZone：

import { NgZone } from '@angular/core';

@Component({...})
export class YourComponent {
  constructor(
    private toastr: ToastrService,
    private zone: NgZone,
    private router: Router
  ) {}
}

然后修改错误回调：

error => {
  console.log("some error occured");
  console.log(error.errorMessage);
  // 用NgZone包裹toastr调用，强制在Angular上下文内执行
  this.zone.run(() => {
    this.toastr.error('OOPS!!!', 'Error!');
  });
  if (error.status === 404) {
    this.router.navigate(['/errornotfound']);
  }
}

2. 调整路由跳转的时机 #

如果错误状态是404，你会立刻跳转到错误页面，这可能导致toastr还没来得及渲染就被页面跳转打断了。可以借助toastr的onHidden回调，等提示框消失后再跳转：

error => {
  console.log("some error occured");
  console.log(error.errorMessage);
  // 监听toastr隐藏事件，再执行跳转
  this.toastr.error('OOPS!!!', 'Error!').onHidden.subscribe(() => {
    if (error.status === 404) {
      this.router.navigate(['/errornotfound']);
    }
  });
}

3. 确认this指向（虽然箭头函数已经避免了这个问题） #

你已经用了箭头函数，所以this指向应该是组件实例，但如果是其他情况（比如用普通函数）可能会有问题。不过从你的console输出来看，这个可能性不大，但可以再确认下this.toastr是否存在（比如打印console.log(this.toastr)）。

先试试第一个方案，这是Angular中异步回调UI不更新最常见的解决办法。如果还是不行，再检查路由跳转的时机是否影响了toastr的渲染。

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