Angular 4路由跳转后如何显示ng-toaster通知？

我来帮你梳理下问题原因，以及对应的解决方案：

问题根源 #

你当前的代码里，先执行了路由跳转，再触发toaster通知。但这里有个关键细节：当调用this.router.navigate()后，当前组件会被Angular销毁（因为路由离开后，该组件的视图不再被渲染）。如果你的<toaster-container>是放在当前组件的模板里，组件销毁时toaster的容器也会被移除，自然看不到通知了。

解决方案 #

1. 将toaster容器放在全局根组件中 #

这是最核心的解决方式——把toaster的容器放到根组件（比如app.component.html）里，这样不管路由怎么切换，容器始终存在于页面上，不会随组件销毁而消失。

修改app.component.html：

<!-- 你的路由出口 -->
<router-outlet></router-outlet>
<!-- 全局的toaster容器 -->
<toaster-container></toaster-container>

2. 调整代码调用顺序（逻辑更合理） #

虽然全局容器已经解决了核心问题，但建议把toaster的调用放在路由跳转之前，逻辑上更通顺：

saveData() {
  // 先显示通知
  this.toaster.warning("Please Add valid data","Opps!");
  // 再执行路由跳转
  this.router.navigate(['/home/departmentItemTransfer']);
}

3. 调整toaster超时配置（可选） #

如果通知还是一闪而过，可以在调用时指定更长的显示时间：

this.toaster.warning("Please Add valid data","Opps!", { timeout: 5000 }); // 显示5秒

额外检查项 #

• 确认你已经在根模块中正确导入了ToasterModule，并配置了对应的服务。
• 确保路由跳转是单页应用的跳转（没有触发页面刷新）——如果是页面刷新导致的通知消失，要避免使用href跳转，始终用router.navigate()完成路由切换。

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