简介
在前端开发中，通知组件经常被用到，这也是我们对用户友好性和用户体验的追求。这篇文章就向大家介绍一个轻量的前端通知组建，即 npm 包 angular4-simple-notifications，为大家提供使用教程。
安装
npm install angular4-simple-notifications --save
或者使用 yarn:
yarn add angular4-simple-notifications
然后，在 app.module.ts 中添加 SimpleNotificationsModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------------- - ---- --------------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
----------------------------------- -- --
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用
在要使用通知的组件中，引入 NotificationsService：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------------- - ---- --------------------------------
------------
--------- -----------
--------- -------- ----------------------------------
--
------ ----- ------------ -
------------------- --------------------- --------------------- --
--------- -
--------------------------------------- ------
-
-在这个例子中，我们创建了一个按钮，点击后将会显示一个成功的通知。如果要自定义通知的样式，可以设置第三个参数，例如：
this.notificationsService.success('标题', '内容', {
timeOut: 3000,
showProgressBar: true,
pauseOnHover: true,
clickToClose: true,
animate: 'fromRight'
});参数
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 通知的标题 | string | - |
| content | 通知的内容 | string | - |
| options | 通知的选项 | Object | - |
| options.timeOut | 自动消失的时间，单位毫秒 | number | 3000 |
| options.showProgressBar | 是否显示进度条 | boolean | false |
| options.pauseOnHover | 鼠标悬停是否暂停计时器 | boolean | true |
| options.clickToClose | 点击是否关闭 | boolean | false |
| options.animate | 动画类型：fromRight、fromLeft、scale、rotate | string | fromRight |
总结
在前端开发中，通知组建是很重要的一部分，它可以提升用户体验，给用户良好的反馈。而使用 angular4-simple-notifications 可以快速实现通知的功能，从而更加专注其他的开发。通过本文我们可以认识到这个组件的安装使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672681e8991b448e3a1d