简介
在前端开发过程中，弹窗是一个经常使用的组件。而ng2-alert-center是一个基于Angular2.x+的轻量级弹窗js插件，使用方便快捷，易于扩展。
安装
在安装ng2-alert-center之前，需要确保已安装好Node.js和npm。
npm安装
使用npm进行安装，可以通过如下方式进行安装：
npm install ng2-alert-center --save
使用
使用ng2-alert-center，只需在组件文件中引入AlertCenterModule模块，然后在组件html文件中添加ng2-alert-center标签即可。
import { AlertCenterModule } from 'ng2-alert-center';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AlertCenterModule],
bootstrap: [AppComponent]
})
export class AppModule { }<alert></alert>
ng2-alert-center组件可以通过配置alert-center服务，来自定义弹窗样式和动画，如下代码：
-- -------------------- ---- -------
------ ----- ------------ -
------------------- ------------------- ------------------- -
-------------------------------------- - ---------------
--------------------------------- - --
----------------------------------- - ----
------------------------------- - -----
--------------------------------------- - -----
------------------------------------ - -----
-------------------------------------------- - ------
-
-接口
现在，ng2-alert-center提供了一些接口，可以更进一步的定义alert-center样式和动画。
alertsPosition
alertsPosition可以定义alert-center的位置，默认值为top-right。
this.alertCenterService.alertsPosition = 'bottom-right';
maxNumber
maxNumber可以定义alert-center最大显示数量，默认值为5。
this.alertCenterService.maxNumber = 10;
alertsLimit
alertsLimit可以定义alert-center的限制最大数量，默认值为500。
this.alertCenterService.alertsLimit = 100;
timeOut
timeOut可以定义alert显示时间，默认值为5000ms。
this.alertCenterService.timeOut = 10000;
showProgressBar
showProgressBar可以定义alert显示进度条，默认值为true。
this.alertCenterService.showProgressBar = false;
pauseOnHover
pauseOnHover可以定义当鼠标悬停时是否暂停alert自动关闭，默认值为true。
this.alertCenterService.pauseOnHover = false;
createNewOnDuplicate
createNewOnDuplicate可以定义当重复alert显示时，是否新建一个alert显示，默认值为false。
this.alertCenterService.createNewOnDuplicate = true;
举例
下面是一个简单的ng2-alert-center的示例，包括了alert-center配置参数和使用方法：
-- -------------------- ---- -------
------
-----------
--------------
---------------
--------------
-------------------
--------
----
------ ---------------------
------ ---------------------
------- ---------------------
------ ---------------------
-----
------- ------------- ------------------------------------------ -------------------- ---- -------
------ - ------------------ - ---- -------------------
------------
---
--
------ ----- ------------ -
------------------- ------------------- ------------------- -
-------------------------------------- - ------------
--------------------------------- - --
----------------------------------- - ----
------------------------------- - -----
--------------------------------------- - -----
------------------------------------ - -----
-------------------------------------------- - ------
-
----------- -
----------------------------------
----- ----------
-------- -------
---
-
-总结
在本文中，我们学习了如何在Angular项目中使用ng2-alert-center插件，了解了插件的接口，以及如何定义插件的样式和动画。对于Angular项目中的弹窗使用，尽管有很多的解决方案，但ng2-alert-center轻量级的特点和易用性还是非常吸引人的。在实际开发中恰当的使用这样一个弹窗插件，可以进一步提高开发效率和用户体验，也能够为我们的前端学习和成长带来巨大的指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600d81e8991b448dde03