简介
@ngx-kit/ui-alert 是一款基于 Angular 的 UI 组件库，其中包含了多种提示框组件。本文将介绍该组件库的安装与使用。
安装
使用 @ngx-kit/ui-alert 组件库需要先安装 Angular 环境，并在项目中引入 @ngx-kit/ui-alert 包的依赖。在项目根目录下执行以下命令安装：
npm install --save @ngx-kit/ui-alert
完成安装后，在项目模块中引入 NgxKitUIAlertModule：
import { NgxKitUIAlertModule } from '@ngx-kit/ui-alert';
@NgModule({
imports: [ NgxKitUIAlertModule ]
})
export class AppModule { }使用
ngui-alert
ngui-alert 是该组件库中最基础的提示框组件，用于展示普通的单一信息。使用该组件时，需要传入一个实现了 NGUI_ALERT_OPTIONS 接口的配置对象。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- ---------------- - ---- --------------------
------------
--------- -----------
--------- -
----------- ------------------------------ -------------------
--
---------- -
-
-------- -------------------
--------- -
----------- ----------
--------- -----
---------------- -----
- -- ----------------
-
-
--
------ ----- ------------ -
------------- ---------------- - -
--------- ----
--
-ngui-alert-group
ngui-alert-group 可以用来批量展示多个提示框，使用方法类似于 ngFor。同样需要传入一个实现了 NGUI_ALERT_OPTIONS 接口的配置对象。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- ---------------- - ---- --------------------
------------
--------- -----------
--------- -
----------------- -------------------------
----------------- ------- --------------
----------------- ------- --------------
----------------- ------- --------------
-------------------
--
---------- -
-
-------- -------------------
--------- -
----------- ----------
--------- ------
---------------- -----
- -- ----------------
-
-
--
------ ----- ------------ -
------------- ---------------- - -
--------- ----
--
-ngui-dialog
ngui-dialog 可以用于展示内容更为丰富的提示框，包括标题、图标、按钮等。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- ----------------- -------------- - ---- --------------------
------------
--------- -----------
--------- -
------------ --------------------------
---- -----------------------
-------- -- --- ----- -- --- -----------
------- -- --- ------- -- --- -------------
------
------- ------------------------- ---------------------------------
------- --------------------- -----------------------------
--------------
--
---------- -
-
-------- -------------------
--------- -
----------- -------
----- ---------------------
- -- ----------------
-
-
--
------ ----- ------------ -
-------------- ---------------- - -
--------- -
--
-------- ---- -
-- -- ------
--------------------------- - ---
------------- -- --------------------------- - -- ---
-
-示例代码
完整示例代码可以在 Github 上找到，或者点击这里进行在线运行。
总结
@ngx-kit/ui-alert 组件库提供了多种提示框组件，可以满足不同场景的需求。使用时需要配置实现了 NGUI_ALERT_OPTIONS 接口的配置对象，这样可以非常方便地控制提示框的样式和行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822c0e