切换页面时PrimeNg Toast无法显示的问题求助

核心原因分析 #

1. 路由跳转时机与Toast渲染时序冲突：用户详情页在删除操作完成后立即跳转，当前组件被销毁，Toast尚未完成渲染就随组件一同销毁。
2. 若MessageService未全局单例注入，不同组件的<p-toast>无法共享消息；即使全局注入，若消息未配置路由跳转后保留，新页面的Toast也无法接收之前的消息。

解决方案步骤 #

1. 调整路由跳转逻辑，确保消息优先发送

将userSettingsService.deleteUser中的路由跳转逻辑移除，改由调用组件（用户详情页）控制跳转时机，保证消息先添加再触发路由变化：

修改userSettingsService的deleteUser方法：

async deleteUser(userId: number): Promise<void> {
  // 仅保留API删除逻辑，移除路由跳转代码
  await this.http.delete(`/api/users/${userId}`).pipe(first()).toPromise();
}

修改组件的deleteUser确认回调：

deleteUser() {
  this.confirmationService.confirm({
    message: this.translateService.instant('common.messages.deletion-confirm'),
    header: this.translateService.instant('common.messages.deletion-title'),
    icon: 'fa-light fa-triangle-exclamation',
    acceptLabel: this.translateService.instant('common.messages.ok'),
    rejectLabel: this.translateService.instant('common.messages.cancel'),
    rejectButtonStyleClass: 'p-button-secondary p-button-text',

    accept: async () => {
      const userId = this.store.selectSnapshot(state => state.userSettings.activeUser.id);
      await this.userSettingsService.deleteUser(userId);
      
      // 添加Toast消息，开启路由跳转后保留配置
      this.messageService.add({
        severity: 'success',
        summary: this.translateService.instant('common.messages.success-title'),
        detail: this.translateService.instant('common.messages.user-deleted-success'),
        keepAfterRouteChange: true, // 关键：路由变化后保留消息
        life: 3000 // 可选：设置Toast显示时长，默认3000ms
      });

      // 手动触发路由跳转至用户列表页
      this.router.navigate(['/user-list']);
    },
  });
}

2. 配置全局单例MessageService与唯一<p-toast>

• 在根模块（AppModule）中导入ToastModule并全局提供MessageService，确保服务单例：

import { ToastModule } from 'primeng/toast';
import { MessageService } from 'primeng/api';

@NgModule({
  imports: [
    // 其他业务模块
    ToastModule
  ],
  providers: [
    MessageService,
    // 其他全局服务
  ]
})
export class AppModule {}

• 在全局布局组件（如app.component.html）中添加唯一的<p-toast>组件，确保所有路由页面都能复用：

<p-toast position="top-right"></p-toast>

<!-- 其他布局内容 -->
<router-outlet></router-outlet>

额外说明 #

• 若仍无法显示，检查是否存在多个<p-toast>实例（需确保全局仅一个）；
• 确认MessageService未在组件级别重复提供，否则会创建非单例实例导致消息无法共享。

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