ng2-toastr 不能在 Angular 4 应用程序中工作答案

【问题标题】：ng2-toastr not working in angular 4 applicationng2-toastr 不能在 Angular 4 应用程序中工作
【发布时间】：2018-06-01 05:30:43
【问题描述】：

ng2-toastr 消息在里面时工作正常：

data => {
        this.toastr.info('OOPS!!!', 'Information!');
        this.dictData = data;
        console.log(this.dictData);
        this.results = data.results;
        console.log(this.results);

      } ,

但是当它在里面时不起作用：

   error => {
            console.log("some error occured");
            console.log(error.errorMessage);
            this.toastr.error('OOPS!!!', 'Error!');
            if (error.status === 404) {
              this.router.navigate(['/errornotfound']);
            }
}

无法理解为什么会这样。

非常感谢任何形式的帮助。

【问题讨论】：

在错误部分尝试 this.toastr.info 看看它是否有效。只是为了确保它与 toastr 中的错误方法无关
是的，我试过了，但没用
你能发布整个代码块吗？
这里是完整代码的 github 链接：
github.com/saisreereddy/Project1

标签： angular toastr

【解决方案1】：

这就是正在发生的事情。当出现错误时，您会立即从 fullpageview 重定向到 error page。但是你的 toast 是在 FullpageviewComponent 中配置的。所以它实际上显示了错误消息。但是您已经导航到错误页面，因此您看不到 toast。

您可以通过注释掉错误重定向来检查该理论，如下所示：

error => {
        console.log("some error occured");
        console.log(error.errorMessage);
        this.toastr.info('OOPS!!!', 'Information!');
        // if (error.status === 400) {
        //   this.router.navigate(['/errorbadrequest']);
        // }
        // if (error.status === 404) {
        //   this.router.navigate(['/errornotfound']);
        // }
        // if (error.status === 403) {
        //   this.router.navigate(['/errorauthenticationfailed']);
        // }
        // if (error.status === 414) {
        //   this.router.navigate(['/errorurltoolong']);
        // }
      }

解决方案 01：

您可以在 错误页面 中显示 toast 而不是 FullpageviewComponent

解决方案 02：

在 FullpageviewComponent 中显示错误 toast，然后导航到错误页面。为此，您需要使用 onToastClose 类型的事件。

解决方案 03：

另一个解决方案是创建单独的服务来显示 toast 消息。在应用程序的根级别配置 toast。这样您就不必在每个组件中都添加 toast。

希望这会有所帮助:)

【讨论】：