Angular中PrimeNG MessageService添加消息后跳转页面不显示Toast问题

问题根源 #

1. 你的MessageService是在TaskFlowComponent的providers中声明的，属于组件级服务。调用router.navigate后，当前组件被销毁，对应的MessageService和页面内的<p-toast>也会被卸载，消息完全没机会渲染。
2. 即便服务是全局的，当前页面的<p-toast>会随组件销毁，消息无法在已卸载的组件中展示。

解决方案 #

方案一：延迟跳转，让Toast完成渲染 #

通过setTimeout延迟页面跳转，给Toast足够的显示时间（时长可根据Toast的life属性调整，默认是3000毫秒）：

clickBtn() {
  this.messageService.add({
    severity: 'success', 
    summary: 'info',
    detail: `Registration was successful.`
  });

  // 延迟2秒跳转，匹配Toast默认显示时长
  setTimeout(() => {
    this.router.navigate(['/'], { state: {} });
  }, 2000);
}

方案二：全局共享服务，在目标页面显示Toast #

适合需要在跳转后的页面展示消息的场景：

1. 全局注册MessageService：
   在main.ts中注册全局服务，移除TaskFlowComponent里的providers: [MessageService]：

   bootstrapApplication(AppComponent, {
     providers: [MessageService]
   });
   

2. 目标页面添加Toast组件：
   在跳转后的首页（或目标页面）的模板中加入：

   <p-toast></p-toast>
   

3. 正常调用服务并跳转：
   原代码无需修改，全局的MessageService会将消息传递给目标页面的Toast组件：

   clickBtn() {
     this.messageService.add({
       severity: 'success', 
       summary: 'info',
       detail: `Registration was successful.`
     });
   
     this.router.navigate(['/'], { state: {} });
   }
   

注意事项 #

• 方案一中，延迟时间建议略短于Toast的life属性，确保用户能看到完整的提示内容。
• 方案二中，全局服务会在整个应用内共享消息，若需要隔离消息，可考虑使用key属性区分不同Toast实例。

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