什么是 @cime/ngx-toasty
@cime/ngx-toasty 是一个 Angular 的 toast 组件库，由 cime 团队开发和维护。使用该组件库可以快速方便地实现 toaster 弹窗效果，适用于任何 Angular 项目。
安装
通过 npm 安装
在您的 Angular 项目中，可以通过 npm 安装该组件库依赖包：
npm install --save @cime/ngx-toasty
导入模块
在使用组件之前，需要将 NgxToastyModule 导入到一个你需要的模块中，通常是 app.module.ts。示例：
-- -------------------- ---- -------
------ - --------------- - ---- -------------------
-----------
-------- -
---
----------------
---
--
---
--
------ ----- --------- - -使用
在组件中使用
在组件中，需要获取到 NgxToastyService 的实例才可以使用。示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- -------------------
------------
--------- -------------------
--------- -
------- ------------------------ --------------
--
--
------ ----- ----------- -
------------------- -------------- ----------------- --
---------- -
----------------------------
------ ------ -------
---- ------ ---------
---------- -----
-------- -----
------ ------------
---
-
-toast 配置项
使用 toasty 组件库，可通过如下配置项自定义 toast：
| 配置项 | 必填 | 默认值 | 说明 |
|---|---|---|---|
| type | 否 | info | 指定 toast 类型，支持 success、info、wait、warning、error。 |
| title | 否 | '' | toast 标题。 |
| msg | 是 | - | toast 内容，必填项。 |
| showClose | 否 | false | 是否显示关闭按钮。 |
| timeout | 否 | 5000 | toast 的自动关闭时间，单位：毫秒。 |
| theme | 否 | default | toast 主题，支持 default 和 bootstrap 两种主题。 |
| onAdd | 否 | - | toast 添加时的回调函数。 |
| onRemove | 否 | - | toast 移除时的回调函数。 |
多个 toast 页面显示
如果在同一个页面中需要显示多个 toast，可以使用不同的位置：
-- -------------------- ---- ------- ---------------------------- ------ ------ ------- ---- ------ ------- --- ---------- ----- -------- ----- ------ ------------ --------- ----------- --- ---------------------------- ------ ------ ------- ---- ------ ------- --- ---------- ----- -------- ----- ------ ------------ --------- ------------- ---
自定义 toast 模板
如需自定义 toast 模板，在根模块中导入 TEMPLATE_PROVIDERS，并通过 provide 方法注入一个自定义的 toast 模板组件。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - --------------- - ---- -------------------
------ - -------------- - ---- --------------------
------ - ------------------ - ---- --------------------------------------
-----------
-------- -
----------------
---
--
------------- -----------------
---------- -
-- ------- - ------ -------- ---------
-
-------- -------------------
--------- -
-------- -------------
--------- -
--------------- --------------
-
-
--
---
--
---------- --------------
--
------ ----- --------- - -效果演示
下面是一个示例效果，其中成功/失败/警告弹窗分别使用了不同的主题：
总结
@cime/ngx-toasty 是一个非常实用的 Angular toast 组件库，通过安装和简单配置，可以提高您的 Angular 项目开发效率。希望本文能够帮到您，也欢迎您关注和使用 cime 其他优秀的前端组件库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f1d9381d61a3540db5