本文介绍了使用 npm 包 angular2-notifications 可以如何在 Angular2+ 中实现简单、易于使用和高度可定制的通知。angular2-notifications 支持多种通知类型，如文本、图像和进度，并带有许多配置选项，如位置、显示持续时间、动画、音频等。
安装 angular2-notifications
npm install angular2-notifications --save
引入 NotifierService
将 NotifierService 在你要使用通知的组件中导入。
-- -------------------- ---- ------- ------ - --------------- - ---- ------------------------- ------------ --------- ------------------- ------------ -------------------------------- ---------- -------------------------------- -- ------ ----- -------------------- ---------- ------ - ------------------- ---------------- ---------------- - - ---------- - - -
可选配置
在 NotifierService 中，你可以配置全局设置。
-- -------------------- ---- -------
------------------- ---------------- ---------------- -
---------------------------
--------- -
----------- -
--------- --------
--------- --
--
--------- -
--------- ------
--------- ---
---- --
-
--
---------- -
--------- -----
-------- ------
------------ ----------------
------------------ -----
--------- -
-
---
-各个参数的含义如下：
position：通知显示的位置、距离和间距behaviour：通知的行为，如点击、自动隐藏、悬停等- 其他更多的选项。
使用通知
你可以在任何地方使用通知。
在此例中，通知将出现在顶部右边。
this.notifierService.notify('success', '标题', '内容内容内容内容内容');你可以从以下通知类型中选择：
- success：成功
- error：错误
- warning：警告
- info：信息
- bare：无视觉效果的文本通知。
设置通知类型
通过使用自定义模板的方式，我们可以对通知类型进行更好的配置。使用模板，您可以添加图像、进度和加强的样式等。
HTML 模板设置
-- -------------------- ---- -------
---- ------------------------------------- ---
---- ----------------------------
---- ---------------------------
---- -----------------------------
------
---- -----------------------------
-- ------------------------------------------------
-- ----------------------------------------------------
------
------实现模板
-- -------------------- ---- -------
-- -----------------------------------
------ - ---------- ----- - ---- ----------------
------ - --------------- - ---- -------------------------
------------
--------- ----------------------
------------ ------------------------------------------
---------- ------------------------------------------
--
------ ----- ----------------------------- ---------- --------------- -
-------- -------- -------
-------- ------ -------
-------- ----- -------
------------------ -------
------------- - -
------------------- -------- ------ -
------ ------ -
---- ----------
------ ----------------
---- --------
------ --------------
---- ----------
------ ----------------
---- -------
------ -------------
---- -------
------ -------------
--------
------ ---------------
-
-
-库的 ITypeChangeable 接口约定了公共方法 transformType。使用此接口需要实现此方法。
在 transformType() 函数中，我们可以定义通知类型和 CSS 类之间的关系。
模态通知
this.notifierService. modal('custom', '自定义通知', 'bottom', MyCustomNotificationComponent, {
message: '自定义通知内容',
title: '自定义通知标题',
position: ['center', 'center'],
timeOut: 5000,
type: 'success'
});在此示例中，我们重新定义了通知类型“custom”，并创建了自己的 MyCustomNotificationComponent。notifierService.modal() 方法支持多项选项，如位置、延迟和 CSS 类等。
总结
使用 angular2-notifications 库制作高度可定制和易于使用的通知，以提高用户体验和增加应用程序功能。虽然 library 有许多内置的选项和模板，但如果您的应用程序需要更多的自定义，您可以创建自己的模板来实现自己的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/angular2-notifications