Angular 19中PrimeNG Toast/Confirm服务重复弹窗及首次无响应问题

问题现象 #

• 调用Toast或Confirm服务时，会弹出2个相同的对话框/提示框，首次点击操作无响应
• Toast组件必须指定key属性才能正常显示提示，移除动态绑定key的代码后完全无法弹出提示
• 把相同代码复制到同结构（含懒加载模块）的新项目中能正常运行，但当前项目里Toast/Confirm的观察者每次调用都会触发两次，找不到原因

可能原因 #

1. 服务实例重复创建：Core模块虽然提供了Toast/Confirm服务，但如果Core模块被多个模块（比如懒加载模块）重复导入，会导致服务被多次实例化，每次调用都会触发多个实例的回调
2. Toast组件重复渲染：通过*ngIf结合异步管道动态创建<p-toast>，可能因为Observable多次发射值导致组件被重复创建，同一个key对应多个Toast实例，所以弹出多次提示
3. Observable重复订阅/发射：messageObserver可能存在重复订阅，或者管道操作逻辑导致值被重复发射，触发多次回调

解决办法 #

1. 确保服务单例存在 #

修改Core模块，添加防止重复导入的守卫，同时确保服务只在Core模块提供，懒加载模块不要导入Core模块：

// core.module.ts
import { NgModule, Optional, SkipSelf } from '@angular/core';
import { MessageService } from 'primeng/api';
import { ConfirmationService } from 'primeng/api';

@NgModule({
  providers: [MessageService, ConfirmationService]
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error('CoreModule只能在AppModule中导入，请勿重复导入');
    }
  }
}

2. 简化Toast组件的key配置 #

不需要通过Observable动态绑定key，直接固定全局统一的key：

<!-- 替换原有Toast代码 -->
<p-toast position="top-left" baseZIndex="999999" key="global-toast" life="100000"/>

调用Toast时统一指定这个key：

// Layout service
openToast(toast: ToastMessageOptions) {
  this.toastService.add({ ...toast, key: 'global-toast' });
}

3. 避免Observable重复触发 #

在组件中使用takeUntil操作符管理订阅，防止重复订阅和内存泄漏：

import { Subject, takeUntil } from 'rxjs';
// 组件类内
private destroy$ = new Subject<void>();

ngOnInit() {
  this.messageService.messageObserver.pipe(
    filter(x => x != null),
    takeUntil(this.destroy$)
  ).subscribe(t => {
    // 这里处理消息逻辑，确保只执行一次
  });
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

4. 检查Confirm服务的调用逻辑 #

确认按钮点击事件没有重复绑定，比如不要在模板和TS中同时绑定点击事件，避免重复触发Confirm弹窗：

// 确保confirm调用只执行一次
openConfirmDialog() {
  this.confirmationService.confirm({
    message: '确定要执行此操作吗？',
    accept: () => {
      // 执行确认后的逻辑
    },
    reject: () => {
      // 执行取消后的逻辑
    }
  });
}

验证步骤 #

1. 检查所有懒加载模块，确保没有导入Core模块
2. 替换Toast组件为固定key的实现，测试提示是否正常显示
3. 查看组件中是否有重复订阅Observable的代码
4. 检查浏览器控制台的PrimeNG相关日志，排查隐藏的错误

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