PrimeNG：如何让同位置不同key的Toast不重叠且支持选择性关闭

你遇到的问题是因为创建了多个独立的<p-toast>组件，它们在同一位置渲染时会互相重叠。要实现堆叠显示同时保留按key清除指定通知的功能，只需要使用单个<p-toast>组件即可，具体步骤如下：

1. 修改HTML代码 #

只保留一个<p-toast>容器，无需为每个key单独创建组件：

<p-toast position="bottom-right" [preventOpenDuplicates]="true"></p-toast>

2. 触发消息时保留key标识 #

触发通知时依然使用不同的key来区分类型，单个Toast容器会自动将不同key的消息堆叠显示：

this.messageService.add({
  key: 'key1',
  severity: 'error',
  summary: 'Notification',
  detail: 'Detail Err',
  life: 2000,
  sticky: true
});
this.messageService.add({
  key: 'key2',
  severity: 'warn',
  summary: 'Notification',
  detail: 'Detail Warning !!!',
  life: 2000,
  sticky: true
});

3. 选择性清除通知 #

保留按key清除指定类型通知的功能：

• 清除key1对应的所有通知：

  this.messageService.clear('key1');
  

• 清除所有通知：

  this.messageService.clear();
  

原理说明 #

单个<p-toast>组件会将所有带key的消息纳入同一个容器管理，自动处理堆叠逻辑；而多个<p-toast>组件是独立的DOM元素，同一位置下会重叠渲染。这种方式既保留了按类型（key）管理通知的能力，又实现了无key时的堆叠效果。

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