简介
angular2-notifications-lite 是一个易于使用的 Angular2 通知库，它可以用于在前端应用程序中生成通知。此 npm 包提供了多种方式来自定义通知，包括颜色、位置、图片等等。
安装
使用 npm 进行安装：
npm install angular2-notifications-lite --save
使用
在应用的 NgModule 中导入和设置 SimpleNotificationsModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------------------- - ---- ------------------------------
-----------
-------- -
-----------------------------------
-
--
------ ----- --------- - -在应用中使用 NotificationsService 来创建通知：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------------- - ---- ------------------------------
------------
--------- --------------
--------- -
------- ------------------------------------------
-
--
------ ----- ---------------- -
------------------- --------------------- --------------------- - -
------------------ -
--------------------------------------- ---------
-
-以上代码将创建一个 info 类型的通知，内容为 "Hello"，标题为 "World"。
自定义通知
你可以通过 notificationsOptions 对象自定义通知：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- --------------------- - ---- ------------------------------
------------
--------- --------------
--------- -
------- ------------------------------------------
-
--
------ ----- ---------------- -
------------------- --------------------- --------------------- - -
------------------ -
----- -------- --------------------- - -
-------- -----
---------------- -----
------------- -----
------------- -----
---------- --
--
--------------------------------------- -------- ---------
-
-在 INotificationsOptions 中，你可以设置以下选项：
timeOut：通知在自动关闭之前停留的时间（以毫秒为单位）。默认值为 3000。showProgressBar：是否显示进度条。默认值为 false。pauseOnHover：当鼠标悬停在通知上时是否暂停倒计时。默认值为 false。clickToClose：是否允许单击通知来关闭它。默认值为 true。maxLength：允许通知的最大字符数。超过该字符数的文本将被截断。默认值为 0，表示未设置限制。
支持的通知类型
现在，angular2-notifications-lite 提供了以下通知类型：
successerroralertinfobare
在 NotificationsService 的方法中使用相应的类型来发送特定类型的通知。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- --------------------- - ---- ------------------------------
------------
--------- --------------
--------- -
------- ------------------------------------------
-
--
------ ----- ---------------- -
------------------- --------------------- --------------------- - -
------------------ -
----- -------- --------------------- - -
-------- -----
---------------- -----
------------- -----
------------- -----
---------- --
--
--------------------------------------- -------- ---------
-
-结论
angular2-notifications-lite 是一个非常实用的通知库，它可以帮助你在 Angular2 应用程序中生成各种通知。通过本指南，你已经了解了如何安装和使用该库，并学会了如何自定义通知。在将来，希望你可以将它用于开发实用的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556f781e8991b448d3dc5