简介
在使用 Angular2 开发时，经常需要在前端页面上弹出提示信息，而 angular2-toaster-mod 就是可靠的一个 Angular2 提示框组件，可以轻松实现丰富的提示样式、位置自定义以及自定义操作等功能。
安装
首先需要通过 npm 进行安装，执行以下命令：
npm install angular2-toaster-mod --save
基本使用
在使用前需要在 app.module.ts 中导入组件：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - -------------- -------------- - ---- -------------------
-----------
-------- -
-------------
--
---------- -
--------------
-
--
------ ----- --------- - -在组件中使用示例：
-- -------------------- ---- -------
------ - -------------- -------------- - ---- -------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
------------------- --------------- --------------- -
-- -------
--------------------------------------------------------------- ------ -------- -------- -- -------------------------
-
-配置
通过 ToasterConfig 类配置提示框，可以设置位置、持续时间、类型、颜色、上/下边距等参数：
export const ToasterConfig: any = {
timeout: 5000,
positionClass: 'toast-top-right',
animate: 'flyRight'
};然后在组件中注入 ToasterConfig，并使用它来配置提示框组件：
-- -------------------- ---- -------
------ - ---------- ------- ---------------- - ---- ----------------
------ - -------------- --------------- ------ -------------- - ---- -------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
------ ------- ------------- - --- ---------------
-------------- ------------------
----------------- --
-------- -----
--------------- --------------------------
---
------------------- --------------- --------------- - -
---------- -
--------------------------------------------------------------- ------ -------- -------- -- ----------------------- -------
-
-在 HTML 中使用：
<toaster-container [@flyInOut]="config.animate">
<toaster-toast *ngFor="let toast of toasterService.toasts"
[toast]="toast"
[config]="config"
(click)="toasterService.click(toast)">
</toaster-toast>
</toaster-container>自定义组件
除了默认的提示框样式，您也可以使用自定义组件来替换默认的提示框样式，示例代码如下：
-- -------------------- ---- -------
------ - ---------- ------- ---------------- - ---- ----------------
------ - -------------- --------------- ------ -------------- - ---- -------------------
------------
--------- ---------------
--------- -
---- --------------- -- ---------------- ------------ ----------------------------- --------------------------- - ------- - -------
------------ ------ ------------ - ------------ - ---- - ------ -- -------------------------------------
----------- -----------------------------
------- -------------------------- ----------------------------------
------------ ------------------------------
--- --------------------------- --
----------- -----------------------------
---- ----------------------- -- ----------------------
------- ----------- --- -- ------------------- --- -------- ----------- ----------------------- -------------------------------------------
------
---- ------------- ------------
------
-
--
------ ----- -------------------- ------- ----- -
------------------- --------------- --------------- ------- ----- ----------------- -
--------------------- ------
-
-------------- ------- -
------------------------------------------------ - - --- ---- -----------
-----------------------------------------
--------------
-
-在组件中使用：
-- -------------------- ---- -------
------ - ---------- ------- ---------------- - ---- ----------------
------ - -------------- --------------- ------ -------------- - ---- -------------------
------ - -------------------- - ---- ---------------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
------ ------- ------------- - --- ---------------
-------------- ------------------
----------------- --
-------- -----
--------------- --------------------------
---
------------------- --------------- --------------- -
------------------------------------ - -----
----------------------------------- - ---------------------
-
---------- -
----- ----- - --- ----------------------------------------- -----------
--------------- - -------
----------- - ------- -------
---------- - ----- -- - ------ ----- ---- ---------
------------------ - -
-
------ --- ---------
-------- ------
-------- -- -- -
--------------- ------- -----------
-
-
--
------------------------------------
-
-总结
通过使用 angular2-toaster-mod 可以方便地实现各种类型、样式、位置的提示框功能，并且还可以自定义组件实现更加灵活和复杂的提示框需求。当然，在实际使用中我们还需要针对具体的业务场景和需求进行使用和配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554d981e8991b448d20c5