在现代 web 应用开发中，前端框架和库的重要性越来越高。angular4-notify 就是一个建立在 Angular 上的组件，用于在前端页面中快速创建通知信息。在本篇文章中，我们将学习如何使用 angular4-notify 这个 npm 包。
安装 angular4-notify
首先，需要确保已经安装了 angular 和 npm。在命令行工具中，输入以下命令来安装 angular4-notify：
npm install angular4-notify --save
如果一切顺利，这将会自动安装 angular4-notify 并将其保存到你的应用程序依赖项中。
引用 angular4-notify
在你的 Angular 应用程序中引用 angular4-notify 的步骤是很简单的。需要做的就是在你的 module.ts 文件中添加引用。首先，需要将 angular4-notify 的依赖项导入进来：
import { NotifyModule } from 'angular4-notify';接着，在你的 module.ts 中，将上述依赖项注册到你的 ngModule 中：
@NgModule({
imports: [
// 其他已存在的 imports
NotifyModule
]
})现在，你就可以在你的 application 中使用 angular4-notify 了。
使用 angular4-notify
现在我们学习如何使用 angular4-notify。首先，需要在组件中注入 NotifyService：
import { NotifyService } from 'angular4-notify';接着，需要将其注入到组件的 constructor 中：
constructor(private notifyService: NotifyService) { }现在，你就可以在需要的地方使用 NotifyService 并调用其方法：
this.notifyService.show(
"This is a message",
"This is a title",
"success",
{duration: 5000}
);这个例子中的 show() 方法有四个参数：
- message：显示的消息文本
- title：显示的标题文本
- type：显示的通知类型
- options：配置通知的选项（例如：duration）
以上是使用 angular4-notify 的最基本功能，你可以在自己的项目中更加多样化的使用这个 npm 包进行通知的控制。
深入了解 angular4-notify
在我们深入 angular4-notify 的使用之前，我们先来看看这个包是怎样工作的。
angular4-notify 的核心是一个 Show 方法，它可以使用一个或多个参数来创建每个通知。为了使用这个包，你需要执行以下步骤：
- 注册 NotifyModule
- 在你的组件中注册一个依赖注入器
- 调用 NotifyService
在 angular4-notify 中，可以使用以下方法：
- show：用于显示通知
- success：用于显示成功通知
- error：用于显示错误通知
- alert：用于显示警告通知
- info：用于显示信息通知
在它们之间，这些方法实际上并没有什么不同，只是它们的样式不同而已。
在使用它们时，可以传入以下参数：
- message：通知正文
- title：通知标题
- type：通知类型（可选）
- options：可选项（通知时间、位置等）
示例代码
这里是一个完整的使用 angular4-notify 的示例，仅供参考：
my-component.component.ts
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- ------------------
------------
--------- -------------------
--------- -
-----
------- ------------- ---------------------------- ------- ---------------------
------- ------------- -------------------------- ----- ---------------------
------- ------------- -------------------------- ----- ---------------------
------- ------------- ------------------------- ---- ---------------------
------
-
--
------ ----- ----------- -
------------------- -------------- -------------- - -
------------- -
------------------------
----- -- - ------- ---------
----------
----------
- --------- ---- -
--
-
----------- -
------------------------
----- -- -- ----- ---------
--------
--------
- --------- ---- -
--
-
----------- -
------------------------
----- -- -- ----- ---------
--------
--------
- --------- ---- -
--
-
---------- -
------------------------
----- -- -- ---- ---------
-------
-------
- --------- ---- -
--
-
-app.module.ts
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ------------ - ---- ------------------ ------ - ----------- - ---- --------------------------- ----------- -------- - -------------- ------------ -- ------------- - ------------- ----------- -- ---------- - ------------ - -- ------ ----- --------- - -
结论
angular4-notify 是一个非常实用的 npm 包，能够帮助我们快速创建各种类型的通知。在本文中，我们学习了如何安装这个依赖项、在应用程序中引用它、以及如何在组件中实际使用这个 npm 包。有了这些基础知识，在你的 Angular 应用程序中使用 angular4-notify 将更加容易。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601381e8991b448de147