简介
angular-x-alerts是一个基于Angular框架下的一个提示弹窗库，提供了多种类型的弹窗：警告、成功、失败、信息等。可通过简单的 API 调用来创建您所需要的任何弹窗，还可以自定义自己的样式和动画。
安装
使用npm来安装angular-x-alerts非常简单，只需执行以下命令：
npm install angular-x-alerts
使用
导入模块
在你的Angular应用程序中，你需要首先导入angular-x-alerts包。要实现这一点，请在你的模块.ts文件中添加以下导入语句：
import { XAlertsModule } from "angular-x-alerts";并在@NgModule装饰器中将XAlertsModule添加到imports数组中：
-- -------------------- ---- -------
-----------
------------- -
-------------
--
-------- -
--------------
--------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用弹窗
接下来，您需要在您的组件.ts文件中导入XAlertService类，然后注入到构造函数中。这样，您就可以使用该服务来创建所需的弹窗：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- --------- - ---- -------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------------- ----------------
----------- -
------------------------
----- ------------------
-------- ----- -- - ------- ----- ---- ------ ---------------
-------- -----
------------ -----
--------- -----
---------- ---
-------- -- -- ------------------ ---------
--------- -- -- ------------------ ---------
--
-
-在组件的HTML模板中，您可以通过单击按钮来触发弹窗显示：
<button (click)="showAlert()">Show Alert</button>
这将触发一个成功提示弹窗，其中包含一个自定义消息，并在关闭后打印该消息。
弹窗类型
angular-x-alerts 提供了四种不同的弹窗类型：
- Info
- Success
- Warning
- Error
您可以通过此服务提供的 AlertType 枚举进行选择。例如，要创建一个警告提示弹窗：
this.alertService.show({
type: AlertType.Warning,
message: 'This is a warning alert',
})弹窗属性
以下是您可以通过传递配置对象来设置每个弹窗的属性。
message - 必填项，用于显示在弹窗中的消息。
type - 可选，设置弹窗类型，默认为
AlertType.Info。timeout - 可选，指定弹窗在多长时间后自动隐藏，默认为
0。dismissible - 可选，允许用户手动关闭弹窗。默认为
false。showIcon - 可选，设置是否显示图标。默认为
false。iconClass - 可选，如果要自定义图标，可以传递一个类来添加自定义样式。
onClose - 可选，当弹窗关闭时调用的回调函数。
onClosed - 可选，当弹窗完全关闭后调用的回调函数。
示例代码
下面是一个完整示例的组件，展示了如何使用 angular-x-alerts 来创建弹窗。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- --------- - ---- -------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - ------
------------------- ------------- ----------------
--------------- ---------- -------- ------- -
------------------------
----- -----
-------- --------
-------- -----
------------ -----
--------- -----
---------- ---
-------- -- -- ------------------ ---------
--------- -- -- ------------------ ---------
--
-
-组件的HTML模板：
<button (click)="showAlert(AlertType.Info, 'This is an info alert.')">Show Info Alert</button> <button (click)="showAlert(AlertType.Success, 'This is a success alert.')">Show Success Alert</button> <button (click)="showAlert(AlertType.Warning, 'This is a warning alert.')">Show Warning Alert</button> <button (click)="showAlert(AlertType.Error, 'This is an error alert.')">Show Error Alert</button>
总结
现在你已经知道了如何使用 angular-x-alerts 来创建漂亮的提示弹窗了。 你可以试着在你自己的应用程序中使用它来提供一些友好的用户反馈。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e9d9381d61a3540bba