前言
在前端开发中，我们经常会使用弹窗、提示框等组件来向用户展示信息。而 ngx-flash-messages 就是一个可以快速创建和自定义 flash message 提示框的 npm 包。本文将详细介绍 ngx-flash-messages 的使用方法，帮助读者快速掌握这个优秀的前端工具。
ngx-flash-messages 的介绍
ngx-flash-messages 是一个由 Angular 官方机构发布的 npm 包，它可以帮助我们快速创建并自定义 flash message 提示框。该包提供了丰富的功能来创建多种类型的提示框，并允许用户自定义消息框的外观和行为。
主要的特点包括：
- 可配置的消息类型
- 可自定义的消息标题和正文
- 支持定义消息框的样式和动画效果
- 支持分组消息和自动消退
- 支持自定义消息响应和错误处理
- 兼容 Angular 4+ 和 Ionic 等框架
环境依赖
在使用 ngx-flash-messages 之前，需要先满足以下环境依赖：
- Angular 4+
- Typescript 2.4+
- RxJS 5+
安装 ngx-flash-messages
ngx-flash-messages 可以通过 npm 安装并引入到现有的 Angular 项目中。
使用以下命令安装 ngx-flash-messages：
npm install ngx-flash-messages --save
渲染消息框
在使用 ngx-flash-messages 之前，需引入对应模块并在模板中添加占位符。
通过以下代码可引入 NgxFlashMessagesModule：
-- -------------------- ---- -------
------ - ---------------------- - ---- ---------------------
-----------
-------- -
--------------
------------
--------------------------------
--
------------- - ------------ --
---------- - ------------ -
--
------ ----- --------- - -在模板文件中，添加以下占位符：
<ngx-flash-messages></ngx-flash-messages>
这个占位符将会在页面中渲染消息框。
定义消息类型
ngx-flash-messages 提供了五种默认的消息类型，包括：
- success
- info
- warning
- danger
- primary
你可以在消息框中使用它们，如下所示：
<!-- 普通消息 -->
<button (click)="flash.show('Hello world!')">Show message</button>
<!-- 成功消息 -->
<button (click)="flash.success('Hello world!')">Show success message</button>
<!-- 错误消息 -->
<button (click)="flash.danger('Hello world!')">Show danger message</button>你也可以来自定义并添加新的消息类型。使用以下代码可实现定义新的消息类型：
-- -------------------- ---- -------
------ - ------------ - ---- ---------------------
---------------------------------------------
------- -
------ ---- ---------
------ -------
------ --------
-
---添加新的消息类型之后，你可以在应用中像使用其他消息类型一样来调用新的消息类型。
配置消息框
ngx-flash-messages 允许你针对单个消息配置描述、类型、样式和行为。
下面是一个可定制的消息框的示例：
-- -------------------- ---- -------
---- ----- ---
------- -----------------------
------------ ----------- ------- ----- ---- --------- ---- --- --------
----- ---------
-------- -----
----- --- ---------- ----------------------- -------------
------------- -----
-------- ------------------ ------------------
------------- -
----- --------
------ ------
-
-------- ------ ----------------在该示例中，我们设置了自定义的描述、类型、时间在 8s 后自动关闭、图标、关闭按钮、样式类以及自定义参数 font 和 color。
你还可以通过以下属性来定制消息框：
description- 消息体type- 消息类型timeout- 自动关闭时间icon- 图标showCloseBtn- 是否显示关闭按钮classes- 样式类customParams- 自定义参数
结语
ngx-flash-messages 提供了丰富的功能和定制能力，足以满足大部分前端提示框需求。通过本文中的介绍，我们已经掌握了 ngx-flash-messages 的基础使用方法以及高级功能的设置，可以很好地应用到具体的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567fe81e8991b448e4237