在前端开发中，使用通知组件是很常见的需求。而 angular2-notifications-commonjs 是一个基于 Angular 的通知组件库，使用方便且支持自定义样式。本文将介绍如何使用该 npm 包来实现通知功能。
安装
首先，我们需要通过 npm 安装 angular2-notifications-commonjs 包：
npm install angular2-notifications-commonjs
同时，我们还需要在 angular.json 文件中的 styles 数组中引入 angular2-notifications.css 样式：
"styles": [ "node_modules/angular2-notifications-commonjs/angular2-notifications.css", "src/styles.scss" ],
引入模块
在需要使用通知功能的模块中，我们需要引入 SimpleNotificationsModule 模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------------- - ---- ----------------------------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
-----------------------------------
--
------------- -
------------
--
---------- - ------------ -
--
------ ----- --------- - -上述代码中的 forRoot() 方法是必须的，它会为整个应用程序启用通知功能。
使用组件
在需要使用通知的组件中，我们需要注入 NotificationsService 服务，并使用它来调用通知方法。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------------- - ---- ----------------------------------
------------
--------- -----------
--------- -
-----
------- ----------------------------------------
------- ------------------------------------
------- ----------------------------------------
------- ----------------------------------
------
-
--
------ ----- ------------ -
------------------- --------------------- --------------------- --
------------- -
--------------------------------------- -------------
-
----------- -
------------------------------------- -------------
-
------------- -
------------------------------------ -------------
-
---------- -
------------------------------------ -------------
-
-上述代码中的 success()、error()、warn()、info() 方法分别用于显示成功、错误、警告和信息通知。它们的第一个参数是通知标题，第二个参数是通知内容。
此外，还可以通过全局的配置文件来修改通知的默认设置：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------------- - ---- ----------------------------------
------------
--------- -----------
--------- -
-----
------- ----------------------------------------
------
-
--
------ ----- ------------ -
------------------- --------------------- --------------------- -
---------------------------------------
--------- ---------- --------
-------- -----
---------------- -----
------------- -----
------------- ----
---
-
------------- -
--------------------------------------- -------------
-
-上述代码中，我们使用 setDefaults() 方法来设置全局默认配置。这里设置了通知的位置、持续时间、是否显示进度条、是否呈现暂停和是否点击关闭通知。
自定义样式
最后，我们还可以通过自定义样式来改变通知的样式。我们可以在全局的 styles.scss 中定义样式：
-- -------------------- ---- -------
-- ------
------------------- -
------------- ------- -----------
-
----------- ---------------- -
-------- --------
------------ --------------
------ ------- -----------
-
------------ -
------------ -----
-
--------------------- -
----------- -------
---------- -----
-
-- ------
-------------------- -
------- -------------
------- ------------
------- --------------------
----------- -
------- ----------------------
-------- -----
-
---------------- -
------- ---------------------------------
-
---------- -
----------- -------
------ -
------- ---------------
-
-
-上述代码中，我们使用 @extend 关键字引入了 swal2-toast，swal2-show，swal2-icon.success 等样式，并通过 .simple-notification 类来对通知样式进行自定义。
总结
angular2-notifications-commonjs 是一个用于 Angular 的通知组件库，使用方便且可自定义样式。本文介绍了如何安装、引入模块、使用组件、设置全局默认配置和自定义样式。希望能对大家的开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005591681e8991b448d6879