将最大 toastr 消息限制为两个答案

【问题标题】：Limit max toastr messages to two将最大 toastr 消息限制为两个
【发布时间】：2019-12-30 12:43:19
【问题描述】：

我想限制一次打开 toast 的最大数量。我正在使用 ngx-toastr 模块和 Angular5。我已经像这样配置了全局设置：

ToastrModule.forRoot(
      { maxOpened: 2, 
        preventDuplicates: true,
        timeOut:2000,
        closeButton: true,
        progressBar:true,
        autoDismiss:true,
        newestOnTop:true}),

甚至在渲染它们之前清除吐司：

for(let i=0; i<10;i++){
  this.toastr.clear();
  this.toastr.info(''+i);
}

但是，仍然会同时显示许多 toast 消息。

【问题讨论】：

移除 autoDismiss 并重试。
请检查How to Ask，这不是minimal reproducible example。首先你应该提到你正在使用什么 toast 库。
@LppEdd，我试过了，它仍然显示多个 toasts
我会假设你实际上并没有像这样展示祝酒词？您的代码实际上看起来如何，您是否在那里遇到问题？我尝试通过点击按钮打开toast，即使我快速点击，它也只显示2。
@AJT_82 不，但它是一个套接字连接，所以在极少数情况下，一次会有数百条消息。该 for 循环是其发生方式的复制品。

标签： angular toastr

【解决方案1】：

我创建了一个 Stackblitz，其中有一个解决方法，即一次只允许两个 toast，setTimeout 为 1 秒。

for(let i=0; i<10;i++){
  ((ind)=>{ setTimeout(()=> this.toastr.info(''+i),1000*ind)})(i)
}

https://stackblitz.com/edit/angular-phf1p6

【讨论】：

【解决方案2】：

您可以通过一个简单的 jQuery 选择来实现这一点：

const MAX_TOASTS = 2;

toastr.subscribe(function(args) {
    if (args.state === 'visible')
    {
        var toasts = $("#toast-container > *:not([hidden])");
        if (toasts && toasts.length > MAX_TOASTS)
            toasts[0].hidden = true;
    }
});

jQuery 选择 $("#toast-container > *:not([hidden])") 选择所有不具有属性 hidden 的 toast-container 子级。 Toastr，至少在使用 cdn 版本 2.1.4 时，将 hidden 属性添加到每个被/将被隐藏的 toast。

将 toast 的 hidden 属性设置为 true 会隐藏它。

【讨论】：