Angular2-烤面包机认为两个吐司是重复的?

Question

我正在使用 angular2-toaster，并试图理解为什么 2 个具有不同消息的 toast 被视为"重复"toast，因此只出现了 1 个 toast。我希望两个祝酒词都出现。

我有这个代码：

var toast: Toast = {
type: 'error',
title: "one toast, from one dev to another",
};
var toast2: Toast = {
type: 'error',
title: "another toast, yo!",
};
this.toasterService.pop(toast);
this.toasterService.pop(toast2);

在一个单独的文件中，我有这个烤面包机配置：

this.config = new ToasterConfig({
positionClass: "toast-top-center",
timeout: 10000,
newestOnTop: true,
tapToDismiss: true,
preventDuplicates: true,
animation: "fade",
limit: 3,
});

这些吐司是"重复的"，除了类型吗？

Answer 1

此组件检查 toastId 和正文中是否存在重复项。

源代码：

if (this.toasterconfig.preventDuplicates && this.toasts.length > 0) {
if (toast.toastId && this.toasts.some(t => t.toastId === toast.toastId)) {
return;
} else if (this.toasts.some(t => t.body === toast.body)) {
return;
}
}

由于您的吐司没有正文，因此它们匹配并未能通过重复检查。

var toast: Toast = {
type: 'error',
title: 'one toast, from one dev to another',
body: 'test'
};
var toast2: Toast = {
type: 'error',
title: 'another toast, yo!',
body: 'test2'
};
this.toasterService.pop(toast);
this.toasterService.pop(toast2);

这应该有效。

Answer 2

我同意digitalkoi的回答。

只是一点点补充，如果你想使用没有身体的吐司，你也可以设置preventDuplicates来false。

this.config = new ToasterConfig({
positionClass: "toast-top-center",
timeout: 10000,
newestOnTop: true,
tapToDismiss: true,
★preventDuplicates: false,
animation: "fade",
limit: 3,
});