В этой статье мы создадим собственное тост-уведомление с помощью Angular.
Модель
Наша модель содержит информацию о заголовке, сообщении, позиции, типе уведомления.
Сервис
Основная часть всплывающей службы — BehaviorSubject. Используя эту подписку, мы будем уведомлены, когда нам нужно показать всплывающее уведомление.
Компонент всплывающего уведомления
В машинописном компоненте тоста мы просто делаем подписку. Кроме того, у нас есть дополнительный способ скрыть тост вручную.
HTML-файл очень прост. В этом файле у нас есть пара ngIf для отображения разных значков для разных типов уведомлений, а также мы показываем заголовок и сообщение. Всю эту информацию мы берем из модели тоста.
Самая интересная часть находится в файле CSS. Здесь мы определяем положение всплывающего уведомления.
Чтобы сделать всплывающее уведомление красивым, мы используем сетку CSS. Наша сетка состоит из двух строк, трех столбцов и четырех областей: иконка для разных типов уведомлений, заголовок, сообщение, кнопка закрытия.
Если мы добавим в каждую область уникальный цвет, наши уведомления будут выглядеть так.
Компонент приложения
Внутри HTML-компонента приложения мы используем наш компонент всплывающих уведомлений и, конечно же, в машинописном тексте мы используем службу всплывающих уведомлений для отображения различных всплывающих уведомлений.
В результате у нас есть простое всплывающее уведомление.
Если вам нужно внимательно посмотреть на проект вот ссылка.
Первоначально опубликовано на http://tomorrowmeannever.wordpress.com 26 марта 2022 г.
