PrimeNG组件中如何用两个MessageService区分Toast与消息展示？

你遇到的问题核心在于：Angular默认会将MessageService作为单例注入，你创建的两个自定义服务ToastInformationService和InformationService其实共用了同一个MessageService实例——所以不管调用哪个服务添加消息，所有监听该服务的组件（比如Toast组件和你的消息列表）都会收到通知，导致消息同时以两种形式展示。

要实现按错误类型分别展示，有两种高效的解决方式：

方式一：用key字段区分消息类别（推荐） #

PrimeNG的MessageService原生支持通过key字段对消息分组，你可以给Toast和普通消息分别标记不同的key，再在展示组件中过滤对应类别的消息。

1. 修改自定义服务，添加消息标识 #

Toast服务：

export class ToastInformationService {
  constructor(private messageService: MessageService) {}

  pushInformation(message: string): void {
    this.messageService.add({
      key: 'toast', // 标记为Toast专属消息
      detail: message
    });
  };
}

普通消息服务：

export class InformationService {
  constructor(private messageService: MessageService) {}

  pushInformation(message: string): void {
    this.messageService.add({
      key: 'normal', // 标记为普通消息
      detail: message
    });
  };
}

2. 在组件中过滤展示对应消息 #

• Toast组件指定key，只接收对应消息：

<p-toast key="toast"></p-toast>

• 普通消息列表订阅时过滤key：

export class HeaderComponent implements OnInit {
  informations: string[] = [];

  constructor(
    private informationService: InformationService,
    private toastInformationsService: ToastInformationService,
    private messageService: MessageService
  ) { }

  ngOnInit(): void {
    this.messageService.messageObserver.subscribe(msg => {
      if (msg.key === 'normal') { // 只处理普通消息
        this.informations.push(msg.detail);
      }
    });
  }

  sendMessage(message: string): void {
    this.informationService.pushInformation(message);
  }

  showToast(message: string): void {
    this.toastInformationsService.pushInformation(message);
  }
}

方式二：创建独立的MessageService实例 #

如果需要完全隔离两个消息流，可以手动创建独立的MessageService实例，避免共用单例。

1. 修改自定义服务，手动实例化MessageService #

Toast服务：

export class ToastInformationService {
  private messageService: MessageService;

  constructor() {
    this.messageService = new MessageService(); // 独立实例
  }

  pushInformation(message: string): void {
    this.messageService.add({ detail: message });
  };

  // 暴露订阅入口给组件
  get messageObserver() {
    return this.messageService.messageObserver;
  }
}

普通消息服务同理：

export class InformationService {
  private messageService: MessageService;

  constructor() {
    this.messageService = new MessageService();
  }

  pushInformation(message: string): void {
    this.messageService.add({ detail: message });
  };

  get messageObserver() {
    return this.messageService.messageObserver;
  }
}

2. 在组件中分别订阅独立消息流 #

export class HeaderComponent implements OnInit {
  informations: string[] = [];

  constructor(
    private informationService: InformationService,
    private toastInformationsService: ToastInformationService,
  ) { }

  ngOnInit(): void {
    // 订阅普通消息
    this.informationService.messageObserver.subscribe(msg => {
      this.informations.push(msg.detail);
    });

    // 若要使用PrimeNG原生p-toast，需自定义封装组件来绑定ToastInformationService的实例
  }

  sendMessage(message: string): void {
    this.informationService.pushInformation(message);
  }

  showToast(message: string): void {
    this.toastInformationsService.pushInformation(message);
  }
}

这种方式需要额外封装Toast组件，不如第一种方式简洁，仅在需要完全隔离消息流时使用。

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