简介
在前端开发中，经常需要在网页中进行一些提示操作。比如，用户操作成功后弹出成功提示；用户输入错误后弹出错误提示等。而 angular2-notifications-lynx-solutions 就是一个提供这些提示操作的 npm 包。
angular2-notifications-lynx-solutions 提供了一系列的 API ，可以方便地创建和定制各种提示，比如基本的通知、弹出提示等。本文章将介绍如何在 Angular 应用程序中安装和使用 angular2-notifications-lynx-solutions 包。
安装
要使用 angular2-notifications-lynx-solutions 包，首先需要在你的项目中安装它。可以使用如下命令进行安装：
npm install angular2-notifications-lynx-solutions --save
这样就安装了 angular2-notifications-lynx-solutions。接下来，我们需要在项目中引入它。
引入
在 angular2-notifications-lynx-solutions 中，有三个主要的部件：
- NotificationsService：用于在应用程序中创建通知。
- SimpleNotificationsComponent: 一个简单的组件，可以在应用程序中显示来自
NotificationsService的通知。 - PushNotificationsService: 用于在应用程序中创建 桌面通知。
在你的 Angular 应用程序中，可以通过如下方式引入它们：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------------- - ---- ----------------------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -以上代码中，我们将 SimpleNotificationsModule 引入了我们的模块中。
配置
angular2-notifications-lynx-solutions 提供了一些配置选项来定制通知的位置、样式等。以下是一些可以配置的选项：
- position：定义通知出现的位置。可以是 'top', 'bottom', 'left', 'right'。
- timeOut：定义通知显示的时间(毫秒数)。
- showProgressBar：是否显示一个进度条。
- pauseOnHover：鼠标移上去暂停通知的消失计时器。
我们可以在 forRoot 方法的第二个参数(可选)中配置这些选项：
-- -------------------- ---- -------
-----------
---
-------- -
-----------------------------------
--------- ------- ---------
-------- -----
---------------- -----
------------- ----
--
--
---
--使用
现在，我们可以在 Angular 组件中使用 NotificationsService 了。要创建一个通知，只需要创建一个 Notification 对象并调用 NotificationsService 的 success 方法。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------------- - ---- ----------------------------------------
------------
--------- -----------
--------- -
------- ---------------------------- ----------------
--
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
------------------- --------------------- --------------------- --
---------- --
------------- -
-------------------------------------------- ---------- ------------ -------------
-
-以上代码中，我们在 AppComponent 中使用了 NotificationsService，并在 showSuccess 方法中创建了成功通知。
你可以根据你的需求修改通知的属性，如下所示：
-- -------------------- ---- -------
------------------ -
----- ----- - ----- -------
----- ------- - ----- -- ---- ---------
---------------------------------------- -------- -
-------- -----
---------------- -----
-------- -----------
---
-以上代码中，我们设置了通知的显示时间为 5 秒，并启用了进度条。
总结
angular2-notifications-lynx-solutions 提供了一个方便的 API 来创建通知，并且有多种样式可供选择。本文介绍了在 Angular 应用程序中安装、引入以及使用 angular2-notifications-lynx-solutions。我希望这篇文章为你提供了一些启示，并且帮助你学习如何使用该库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e881e8991b448e092a