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

这就是正在发生的事情。当出现错误时，您可以立即从全页视图重定向到错误页面。但是您的 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中显示 Toast

解决方案02：

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

解决方案03：

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

希望这对:)有所帮助