前言
在前端开发工作中，弹窗提示信息是必不可少的一个功能。如果每个开发人员都自己写一套弹窗提示代码，不仅浪费时间，还会造成代码冗余，增加维护难度。因此，我们需要使用一些能够重复利用的工具来提高开发效率，npm 是一个非常好的选择。
这里给大家介绍一个非常实用的 npm 包，它就是 ng-alert。
什么是 ng-alert
ng-alert 是一个基于 Angular 的提示框组件库，使用它可以轻松地创建各种弹窗提示框，包括警告框、成功框、失败框等等。它具有以下特点：
- 功能丰富，支持多种类型的提示框；
- 简单易用，只需引入一个指令即可实现；
- 定制灵活，支持自定义样式和动画效果；
- 兼容 Angular 5 及以上版本。
如何使用 ng-alert
下面是使用 ng-alert 的步骤：
步骤 1：安装 ng-alert
在你的 Angular 项目中使用 npm 安装 ng-alert：
npm install ng-alert --save
步骤 2：引入 ng-alert 模块
在 app.module.ts 文件中引入 ng-alert 模块：
-- -------------------- ---- -------
------ - ------------- - ---- -----------
-----------
-------- -
--------------
-------------
--
---------- --------------
--
------ ----- --------- - -步骤 3：使用 ng-alert 指令
在需要使用提示框的组件中使用 ng-alert 指令：
<button (click)="showSuccess()">成功提示框</button> <div ngAlert [ngAlertType]="'success'" [ngAlertMessage]="'操作成功！'" [ngAlertDuration]="3000"></div>
在上面的例子中，当按钮被点击时，会触发 showSuccess() 方法，并弹出一个成功提示框，提示框内容是“操作成功！”；提示框的显示时间为 3 秒。
关于 ng-alert 指令的参数说明：
- ngAlertType：提示框类型，可以为 success、error、warning、info 之一；
- ngAlertMessage：提示框显示的消息内容；
- ngAlertDuration：提示框显示的时长，单位为毫秒。如果不设置，则默认为 3000 毫秒。
自定义样式和动画效果
如果你不喜欢 ng-alert 默认的样式和动画效果，也可以自定义它们。
自定义样式
首先，在你的组件的样式文件中，创建一个名为 .my-alert 的样式类：
.my-alert {
background-color: #fff;
border: 2px solid #5cb85c;
border-radius: 5px;
color: #5cb85c;
padding: 10px;
}接下来，在提示框中使用自定义样式类：
<div ngAlert class="my-alert" [ngAlertType]="'success'" [ngAlertMessage]="'操作成功！'" [ngAlertDuration]="3000"></div>
上面的代码中，我们给提示框新增了一个 class="my-alert" 属性，并在组件的样式文件中定义了 .my-alert 样式类，这样即可实现自定义样式。
自定义动画效果
如果你想使用自定义的动画效果，可以在提示框所在组件的样式文件中定义一个名为 .ng-alert-appear 的类和一个名为 .ng-alert-leave 的类：
-- -------------------- ---- -------
---------------- -
---------- --------- ---- ----------
-
--------------- -
---------- -------- ---- ---------
-
---------- --------- -
---- -
-------- --
-
-- -
-------- --
-
-
---------- -------- -
---- -
-------- --
-
-- -
-------- --
-
-上面的代码中，我们定义了两个动画：my-appear 用于提示框的出现效果，my-leave 用于提示框的消失效果。接下来，在提示框所在组件的样式文件中，给提示框增加 .ng-alert-appear 和 .ng-alert-leave 这两个类：
.my-alert.ng-alert-appear {
animation: my-appear 0.3s backwards;
}
.my-alert.ng-alert-leave {
animation: my-leave 0.3s forwards;
}在上面的代码中，我们给 .my-alert 这个样式类新增了 .ng-alert-appear 和 .ng-alert-leave 两个类，这样提示框就会使用我们自定义的动画效果了。
示例代码
下面是一个使用 ng-alert 的完整示例代码，你可以参考它来使用 ng-alert：
-- -------------------- ---- ------- ---- ------------------ --- ------- -------------------------------------- ------- ------------------------------------ ------- -------------------------------------- ------- ----------------------------------- ------------- ------------------ ---- ------- ---------------- ------------------------- ------------------------------- ------------------------------- ---------------
-- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
--------- - ------
----------- --------- - ------- - --------- - -------
------------ - ---
------------- -
-------------- - -----
-------------- - ----------
----------------- - --------
-
----------- -
-------------- - -----
-------------- - --------
----------------- - --------
-
------------- -
-------------- - -----
-------------- - ----------
----------------- - -------
-
---------- -
-------------- - -----
-------------- - -------
----------------- - ----------
-
----------- -
-------------- - ------
-
--- -------------------- ---- -------
-- ----------------- --
--------- -
----------------- -----
------- --- ----- --------
-------------- ----
------ --------
-------- -----
-
------------------------- -
---------- --------- ---- ----------
-
------------------------ -
---------- -------- ---- ---------
-
---------- --------- -
---- -
-------- --
-
-- -
-------- --
-
-
---------- -------- -
---- -
-------- --
-
-- -
-------- --
-
-总结
ng-alert 是一个非常实用的 Angular 提示框组件库，它可以为我们的前端开发工作提供强大的支持。本文中，我们详细介绍了使用 ng-alert 的步骤和方法，并给出了自定义样式和动画效果的代码示例。我相信，通过这篇文章，您已经掌握了如何使用 ng-alert 来实现提示框功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671f81e8991b448e389d