前言
在前端开发中，我们不仅需要掌握 HTML、CSS 和 JavaScript 等基础知识，还需要掌握一些优秀的第三方库和插件，以便能够更快速、高效地开发出优秀的 Web 应用程序。
其中，ng2-toastr-notifications 就是一款非常实用的通知插件，它能够在用户操作过程中，给出一些友好、清晰的提示信息，让用户在操作过程中更加流畅、愉快。今天，本文将为大家详细介绍 npm 包 ng2-toastr-notifications 的使用教程。
安装
- 进入到你的项目的根目录下，打开控制台窗口，执行以下命令：
npm install ng2-toastr-notifications --save
- 等待安装完成之后，在你的项目中引入 ToastrNotificationsModule：
-- -------------------- ---- -------
------ - ------------------------- - ---- ---------------------------
-----------
-- ---
-------- -
-- ---
-----------------------------------
--------- ------- ---------
-------- -----
---------------- -----
------------- -----
------------- ----
--
--
-- ---
--
------ ----- --------- - -以上代码，我们引入了 ToastrNotificationsModule 模块，并且通过 ToastrNotificationsModule.forRoot() 方法，设置了一些参数，其中：
- position：通知信息显示的位置，通过一个字符串数组传递，分别为竖坐标和横坐标的方向，例如：['top', 'right']。
- timeOut：通知信息的显示时间（单位：毫秒）。
- showProgressBar：是否显示通知信息的进度条。
- pauseOnHover：鼠标悬停在通知信息上时是否暂停计时器。
- clickToClose：是否允许通过点击关闭通知信息。
基本使用
ng2-toastr-notifications 是一款非常实用的通知组件，我们只需要简单了解以下几个 API 即可快速地在我们的应用程序中使用它。
显示消息
要显示一个通知信息，我们可以使用以下代码：
-- -------------------- ---- -------
------ - -------------------------- - ---- ---------------------------
------------
-- ---
--
------ ----- ------------ ---------- ------ -
------------------- -------------- --------------------------- - -
---------- -
------------------------------ ---------
-
-以上代码中，我们首先引入了 ToastrNotificationsService，它是一个通知服务，在组件中初始化之后，我们就可以使用 this.toastrService.show() 方法展示一个通知信息。
显示错误消息
要显示一个错误消息，我们可以使用以下代码：
-- -------------------- ---- -------
------ - -------------------------- - ---- ---------------------------
------------
-- ---
--
------ ----- ------------ ---------- ------ -
------------------- -------------- --------------------------- - -
---------- -
---------------------------------
-
-以上代码中，我们使用了 ToastrNotificationsService 的 error() 方法来显示一条错误通知信息。
显示成功消息
要显示一个成功消息，我们可以使用以下代码：
-- -------------------- ---- -------
------ - -------------------------- - ---- ---------------------------
------------
-- ---
--
------ ----- ------------ ---------- ------ -
------------------- -------------- --------------------------- - -
---------- -
------------------------------------
-
-以上代码中，我们使用了 ToastrNotificationsService 的 success() 方法来显示一条成功通知信息。
显示警告消息
要显示一个警告消息，我们可以使用以下代码：
-- -------------------- ---- -------
------ - -------------------------- - ---- ---------------------------
------------
-- ---
--
------ ----- ------------ ---------- ------ -
------------------- -------------- --------------------------- - -
---------- -
----------------------------------
-
-以上代码中，我们使用了 ToastrNotificationsService 的 warning() 方法来显示一条警告通知信息。
总结
本文详细介绍了 npm 包 ng2-toastr-notifications 的基本使用方法，包括安装、配置、以及在应用程序中使用的方法。希望通过本文的介绍，你能够学到更多有关前端开发的知识，并且掌握一款实用的通知插件，来优化你的应用程序的用户体验。
示例代码
https://stackblitz.com/edit/ng2-toastr-notifications-example?file=src%2Fapp%2Fapp.component.ts
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600561aa81e8991b448df57a