ngx-toastr не исчезает. Angular18

Вопрос или проблема

export class ConfComponent implements OnInit {
  constructor(
    private toastr: ToastrService
  ) { }
  
  ngOnInit(): void {
    setTimeout(() => {
      this.toastr.info('Сообщение', 'Заголовок', {
        closeButton: true,
        progressBar: true,
        progressAnimation: 'increasing',
        positionClass: 'toast-bottom-left',
        timeOut: 2000
      });
    }, 5000);
  }
}

Ответ или решение

Проблема с использованием библиотеки ngx-toastr в Angular 18, когда уведомление не исчезает, несмотря на установленные настройки, может возникнуть по нескольким причинам. Рассмотрим вашу ситуацию подробно, чтобы помочь вам решить эту проблему.

Описание проблемы

Из вашего кода видно, что вы пытаетесь показать уведомление через 5 секунд с помощью метода setTimeout. Ваша конфигурация уведомления включает опции closeButton, progressBar, progressAnimation и timeOut. Однако уведомление не исчезает, даже при нажатии кнопки закрытия.

Анализ подхода

На первый взгляд код выглядит правильно, однако давайте рассмотрим несколько аспектов, которые могут повлиять на поведение ngx-toastr.

1. Настройки таймаута: Вы установили timeOut: 2000, что означает, что уведомление должно исчезнуть через 2 секунды, однако это время отсчитывается с момента его появления. Если уведомление появляется через 5 секунд, а вы задаете тайм-аут 2 секунды, уведомление исчезнет через 7 секунд после загрузки компонента.

2. События и порядок исполнения: Поскольку уведомление вызывается в ngOnInit, и учтите, что во время вызова toastr.info() браузер может игнорировать другие события, такие как нажатие на кнопки, если уведомление уже активно.

3. Конфликт с другими обработчиками: Убедитесь, что в вашем приложении нет других обработчиков событий, которые могут влиять на фон уведомления или поведение библиотеки.

Рекомендации по решению

Теперь к возможным решениям вашей проблемы:

1. Проверка других частей приложения: Убедитесь, что в других частях приложения нет конфликтов или ошибок, которые могли бы повлиять на работу ngx-toastr. Особенно обратите внимание на стили и скрипты, которые могут изменять поведение уведомлений.

2. Переход к вызову Toast внутри Subscribe или do: Если вы используете асинхронные операции или API-вызываемости, рассмотрите возможность использования subscribe для управляемого времени показа уведомления. Например:

   ngOnInit(): void {
    setTimeout(() => {
      this.showToast();
    }, 5000);
   }
   
   private showToast() {
    this.toastr.info('Message', 'Title', {
      closeButton: true,
      progressBar: true,
      progressAnimation: 'increasing',
      positionClass: 'toast-bottom-left',
      timeOut: 2000
    });
   }

3. Обновление и исправление зависимостей: Убедитесь, что у вас установлена последняя версия ngx-toastr. Иногда обновления содержат исправления, которые могут решить вашу проблему.

4. Проверка стилей и окружения: Если у вас есть кастомные стили, они могут предотвратить исчезновение уведомления. Проверьте CSS, который вы могли применить к notifications.

5. Исследуйте конфигурацию приложения: Возможные проблемы в конфигурации могут блокировать корректную маршрутизацию событий. Проверьте настройки роутера и жизненный цикл компонентов.

Заключение

Проблема с исчезновением уведомлений ngx-toastr в Angular может быть вызвана различными факторами, начиная от настроек таймаута и заканчивая конфликтами с другими частями кода. Рекомендуем протестировать указанные варианты, чтобы определить источник проблемы и исправить ее.

Если после применения всех рекомендаций проблема сохраняется, пожалуйста, предоставьте дополнительную информацию о окружении и других компонентах приложения для более глубокого анализа.