在前端开发中，我们经常需要提示用户某些信息或者操作结果，Snackbar 是一个非常优雅的选择。而 ngx-heyl-snackbar 是一个基于 Angular 的 Snackbar 插件，本文将向大家介绍如何使用它。
安装
使用 npm 安装：
npm install ngx-heyl-snackbar --save
引入并注册
在 app.module.ts 中引入 ngx-heyl-snackbar：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ----------------- - ---- ------------------------------
------ - ------------------ - ---- --------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------
------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用
在组件中使用：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- --------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- -------------------- -------------------- --
-------------- -
-----------------------------------------
-
-API
HeylSnackbarService
| 方法 | 描述 |
|---|---|
| info(message: string, action?: string) | 打开一个消息提示框，样式为 info，可选参数 action 为操作按钮文本 |
| success(message: string, action?: string) | 打开一个消息提示框，样式为 success，可选参数 action 为操作按钮文本 |
| warning(message: string, action?: string) | 打开一个消息提示框，样式为 warning，可选参数 action 为操作按钮文本 |
| error(message: string, action?: string) | 打开一个消息提示框，样式为 error，可选参数 action 为操作按钮文本 |
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- --------------------
------------
--------- -----------
--------- -
------- --------------------------- -----------------
--
--
------ ----- ------------ -
------------------- -------------------- -------------------- --
-------------- -
-----------------------------------------
-
-结论
ngx-heyl-snackbar 是一个非常简单易用的 Snackbar 插件，具有良好的扩展性。希望大家可以尝试使用，让自己的网站更加优雅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1e81e8991b448dabe8