Angular PrimeNG 避免在同一位置使用不同键的 cogo toast 重叠

是的，你可以，但不能用这种方法，所以读到最后.

在我看来，第一个关于不同 cogo toast 组件重叠的问题是不可能实现的，因为它们是独立的组件，不知道toast组件的任何其他实例发生了什么.

因此，给出第一个语句，我们必须将所有 cogo toast 放在单个toast cmp实例中(例如，不要使用相同的键)

这里有第二个问题，关于 cogo toast 的差异清除，如primeNg文档中所示，该库提供了一个选项，可以清除所有工具提示，或清除某些工具提示组件中的所有工具提示(基于键).这不是我们想要的结果.有关支持哪些清算的更多信息，您可以查看文档toast docs here.

现在是解决办法的时候了.

如果我们转到这里primeNG toast source，我们可以看到所有消息(例如可见的祝wine 词)都存储在变量messages中名为Toast的组件中.因此，我清除特定消息的方法是将Toast组件与ViewChild组件一起处理，如下所示:

export class AppComponent {
   @ViewChild(Toast) toast: Toast;

  clear(type: string) {
    this.toast.messages = this.toast.messages.filter(
      (x) => x.severity !== type
    );
  }
}

因此，每当我点击某个明确的type通知按钮时，我就会从祝wine 词中清除该消息的所有实例.

现在应该都可以工作了，但实际上，所有第三方组件库通常都使用OnPush更改检测策略，所以我们必须采取额外的操作.我们必须触发Toast的更改检测，并最终得到以下解决方案

export class AppComponent {
  @ViewChild(Toast) toast: Toast;
  @ViewChild(Toast, { read: ViewContainerRef, static: true })
 ...
 clear(type: string) {
    this.toast.messages = this.toast.messages.filter(
      (x) => x.severity !== type
    );
    const changeDetectorRef = this.toastRef.injector.get(ChangeDetectorRef);
    changeDetectorRef.detectChanges();
  }
}

有关CDR和这里使用的技术的更多信息，您可以查看以下文章:Forcing change detection on third-party Angular components

工作stackblitz人

备注: 从Toast组件发出的关闭事件可能会有一些有趣的东西，但我相信它们不会引起任何问题.