如何清除primeng中的吐司消息？

Question

我在 Growl 中使用 Angular8 和 Primeng-8.1.1 版本。

当多条吐司消息时，由于多条吐司消息，屏幕看起来很不清晰。我想删除所有以前打开的 toast 消息。现在，我根据 primeng 文档使用以下代码。但它并没有清除旧的 toast 消息。

this.messageService.clear();
this.messageService.add({
    severity: "success",
    summary: "Success Message",
    detail: "Success Message"
});

Answer 1

调试到库代码后，我找到了解决方案。此版本的 Primeng 没有 clear().

的实现

MessageService 公开了 clearObserver Observable。我已订阅它并将组件的 value 输入分配给空白数组值。

模板 :

<p-growl #toast [(value)]="msgs" life="10000"></p-growl>

组件 :

msgs = [];
@ViewChild('toast', {static: false}) toast: Growl;
...
this.messageService.clearObserver.subscribe(() => {
     this.toast.value = [];
});

Answer 2

此问题已在 gitHub 上提出。

我建议使用 Toast 而不是 Growl，因为 Growl 已被弃用。（检查证明 here）。

按如下方式更改您的 HTML 代码

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

现在使用与 Primeng

相同的 clear 功能

this.messageService.clear();

祝你好运。

How to clear toast messages in primeng?