Создание Angular-сервиса

Для начала необходимо подключить библиотеку iziToast к проекту. В случае с Angular наиболее удобным способом является установка через npm:

npm install izitoast --save

После установки стили библиотеки нужно импортировать в главный файл стилей проекта styles.css или styles.scss:

@import "~izitoast/dist/css/iziToast.min.css";

JavaScript-библиотеку iziToast можно импортировать в сервис через ES6-модули:

import iziToast from 'izitoast';

Создание Angular-сервиса для уведомлений

Создание отдельного сервиса позволяет централизованно управлять всеми уведомлениями в приложении, упрощает поддержку и обеспечивает единообразный стиль.

import { Injectable } from '@angular/core';
import iziToast from 'izitoast';

@Injectable({
  providedIn: 'root'
})
export class ToastService {

  private defaultConfig = {
    position: 'topRight',
    timeout: 5000,
    progressBar: true,
    close: true,
    pauseOnHover: true,
    resetOnHover: false
  };

  success(message: string, title?: string) {
    iziToast.success({
      ...this.defaultConfig,
      title: title || 'Успех',
      message
    });
  }

  error(message: string, title?: string) {
    iziToast.error({
      ...this.defaultConfig,
      title: title || 'Ошибка',
      message
    });
  }

  warning(message: string, title?: string) {
    iziToast.warning({
      ...this.defaultConfig,
      title: title || 'Внимание',
      message
    });
  }

  info(message: string, title?: string) {
    iziToast.info({
      ...this.defaultConfig,
      title: title || 'Информация',
      message
    });
  }

  custom(config: Partial<typeof iziToast>) {
    iziToast.show({
      ...this.defaultConfig,
      ...config
    });
  }
}

Конфигурация уведомлений

Базовая конфигурация, которая используется во всех уведомлениях, включает:

  • position — место отображения на экране (topRight, topLeft, bottomRight, bottomLeft, center).
  • timeout — время отображения уведомления в миллисекундах.
  • progressBar — отображение полосы прогресса.
  • close — наличие кнопки закрытия.
  • pauseOnHover — при наведении мыши таймер остановки уведомления.
  • resetOnHover — сброс таймера при повторном наведении.

Дополнительно для каждого типа уведомления можно задавать свои свойства: icon, color, title, message, overlay, animateInside, zindex.

Вызов уведомлений в компонентах

Использование сервиса в Angular-компоненте выглядит следующим образом:

import { Component } from '@angular/core';
import { ToastService } from './toast.service';

@Component({
  selector: 'app-demo',
  template: `<button (click)="showSuccess()">Показать успех</button>`
})
export class DemoComponent {
  constructor(private toast: ToastService) {}

  showSuccess() {
    this.toast.success('Операция выполнена успешно', 'Готово');
  }

  showError() {
    this.toast.error('Произошла ошибка при сохранении', 'Ошибка');
  }
}

Это обеспечивает единообразие и централизованное управление уведомлениями, исключая дублирование кода в компонентах.

Настройка кастомного уведомления

IziToast позволяет создавать уведомления с уникальным стилем и поведением:

this.toast.custom({
  title: 'Кастомное уведомление',
  message: 'Сообщение с индивидуальными настройками',
  color: 'blue',
  icon: 'fa fa-star',
  position: 'bottomLeft',
  timeout: 10000,
  progressBarColor: 'yellow'
});

Можно комбинировать любые свойства по документации iziToast: отображение overlay, добавление кнопок, кастомная анимация входа и выхода.

Обработка нескольких уведомлений

По умолчанию iziToast отображает несколько уведомлений одновременно. Можно управлять их количеством и позиционированием через параметры:

iziToast.settings({
  maxOpened: 3,
  resetOnHover: true
});

Это предотвращает переполнение экрана большим количеством сообщений и улучшает пользовательский опыт.

Использование событий уведомлений

IziToast предоставляет колбэки для отслеживания событий:

  • onOpening — при начале отображения уведомления.
  • onOpened — после полного отображения.
  • onClosing — при закрытии уведомления.
  • onClosed — после закрытия.

Пример с обработкой события закрытия:

iziToast.success({
  title: 'Выполнено',
  message: 'Операция завершена',
  onClosed: () => console.log('Уведомление закрыто')
});

Интеграция с RxJS и формами

Сервис iziToast удобно использовать в связке с RxJS для уведомлений о результатах асинхронных операций:

this.apiService.saveData(data).subscribe({
  next: () => this.toast.success('Данные сохранены'),
  error: err => this.toast.error(`Ошибка: ${err.message}`)
});

Также удобно уведомлять пользователей о событиях форм:

if (this.form.invalid) {
  this.toast.warning('Заполните все обязательные поля');
}

Локализация и мультиязычность

Можно задавать динамический заголовок и сообщения в зависимости от языка пользователя. Например:

const messages = {
  en: { success: 'Operation successful' },
  ru: { success: 'Операция выполнена успешно' }
};

const lang = 'ru';
this.toast.success(messages[lang].success);

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

Оглавление