ng2-toastr 在 angular 4 应用程序中不工作

Question

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']);
            }
}

无法理解为什么会这样。

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

Answer 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。这样您就不必在每个组件中添加吐司。

希望对您有所帮助:)

ng2-toastr 在 angular 4 应用程序中不工作

ng2-toastr not working in angular 4 application

toastr

angular