Угловой материал Snackbar: не перезаписывает предыдущее сообщение новым сообщением

Question

Я использую Snackbar для отображения сообщений об ошибках и предупреждений для пользователя.Иногда это может происходить близко друг к другу во времени, ближе к времени отображения первого сообщения.Настолько близко, что у пользователя недостаточно времени для прочтения первого сообщения перед перезаписью вторым сообщением.

Есть ли способ изменить поведение на ожидание окончания первого сообщения перед отображениемво-вторых, или накапливать их?

Answer 1

Вместо того, чтобы вызывать Snackbar для каждого сообщения, вы можете поместить их все в массив, чтобы имитировать «очередь» сообщений.Я бы предложил иметь службу, которая отвечает за это.

Затем в этой службе вы можете подписаться на обратный вызов afterDismissed() Snackbar, который будет срабатывать всякий раз, когда Snackbar закрывается.Вот простой пример того, как это будет выглядеть:

messageQueue: string[] = [
'Message 1',
'Message 2',
'Message 3'
]

private displaySnackbar(): void {
  const nextMessage = this.getNextMessage();

  if(!nextMessage){
    return;
  }

  this.snackBar.open(nextMessage, undefined, { duration: 1000 })
  .afterDismissed()
  .subscribe(() => {
    this.displaySnackbar();
  });
}

private getNextMessage(): string | undefined {
  return this.messageQueue.length ? this.messageQueue.shift() : undefined;
}

И здесь - это базовая, работающая демонстрация Stackblitz.

В демоверсии вы увидите, чтоВы можете «нажать спам» на кнопку «Добавить сообщение», которая поставит в очередь все созданные сообщения, но снэк-бар отобразит их только после того, как каждое сообщение будет отображаться в течение 1 секунды.