在前端开发中，我们经常需要使用各种第三方库来帮助我们快速开发出高质量的应用程序。其中，npm 是最受欢迎的包管理器之一，它提供了数万个开源库，方便我们进行快速开发和部署。
今天我们要介绍的就是一种非常实用的 npm 包，它就是 cook-toast-ng5，它是基于 Angular 5 框架开发的一款弹窗库。
安装
cook-toast-ng5 可以通过 npm 安装，运行以下命令即可：
npm install cook-toast-ng5 --save
使用
使用 cook-toast-ng5 前需要先导入相关的模块，导入方式如下：
import { CookToastNg5Module } from 'cook-toast-ng5';
@NgModule({
imports: [CookToastNg5Module]
})
export class AppModule { }在需要引用 toast 的组件中，我们需要先在 constructor 中注入 CookToastNg5Service 服务。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- -----------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------------
------- ------ -------------------
- - -
------------------ -
--------------------
-------- -------- ------
---
-
-toast 的基本样式已经在全局样式中定义好。如果您希望覆盖默认的样式，您可以通过在全局样式中定义相关样式类来实现。
在组件中使用这个库主要就是调用 CookToastNg5Service 中暴露的 API 来进行相关操作，以下是一些常用的 API。
API
default(options: ToastOptions)
一般弹窗，仅有一个按钮，用户点击后弹窗关闭。
this.toast.default({
message: 'Default Toast'
});info(options: ToastOptions)
信息弹窗，仅有一个按钮，用户点击后弹窗关闭。
this.toast.info({
message: 'Information Toast'
});success(options: ToastOptions)
成功弹窗，仅有一个按钮，用户点击后弹窗关闭。
this.toast.success({
message: 'Success Toast'
});warning(options: ToastOptions)
警告弹窗，仅有一个按钮，用户点击后弹窗关闭。
this.toast.warning({
message: 'Warning Toast'
});error(options: ToastOptions)
错误弹窗，仅有一个按钮，用户点击后弹窗关闭。
this.toast.error({
message: 'Error Toast'
});confirm(options: ConfirmOptions)
确认弹窗，包含确认和取消两个按钮。
-- -------------------- ---- ------- -------------------- -------- --- --- ------- -- -- ------- ------------------ ---------- ----------------- -------- ---------- -- - -- ------------- ----------- -- - -- ------------- ---
prompt(options: PromptOptions)
可输入弹窗，包含确认和取消两个按钮。
-- -------------------- ---- ------- ------------------- -------- ------- ------- ------------------ ---------- ----------------- -------- --------------- -- - -- ---------------- ----- ------- ----------- -- - -- ------------- ---
源代码
cook-toast-ng5 源代码已经开源，并且托管在 GitHub 上。如果您有兴趣进行二次开发，欢迎访问项目主页：https://github.com/weijianfeng/cook-toast-ng5。
总结
通过本文的介绍，我们了解了如何在 Angular 5 项目中使用 cook-toast-ng5 这个 npm 包，该库的 API 也进行了详细说明。希望本文能够对您理解和使用 cook-toast-ng5 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056dfd81e8991b448e727b