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 重定向到错误页面。但是您的吐司配置在 FullpageviewComponent 中。所以它实际上显示了错误消息。但是您已经导航到错误页面，因此您无法看到祝酒词。

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

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：

您可以在错误页面中显示吐司，而不是 FullpageviewComponent

解决方案02：

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

解决方案03：

另一种解决方案是创建单独的服务来显示Toast消息。在应用程序的根级别配置Toast。通过这种方式，您不必在每个组件中添加吐司。

希望这会有所帮助：）

ng2-toastr无法在角度4应用中工作

1 个答案: