随着前端技术的不断发展，组件化和模块化已经成为了前端开发不可或缺的一部分。其中，使用 npm 包管理前端项目的模块已经成为了非常流行的方式。在本文中，我们将会介绍一个非常好用的 npm 包 ng2-toasty-gamebench，该包能够为我们的应用程序提供许多弹窗组件的功能，这些组件包括成功消息、错误消息以及警告消息等等。
安装
首先，我们需要安装 ng2-toasty-gamebench 包。这可以通过下面的命令行来实现：
--- ------- -------------------- ------
该命令将会安装 ng2-toasty-gamebench 包，并将其添加到您的 package.json 文件中。
使用
在您的代码中，您需要imports ng2-toasty-gamebench 的模块：
------ - ------------ - ---- -----------------------
然后，您就可以在您的组件中使用 toasty：
------ - --------- - ---- ----------------
------ - -------------- ------------ - ---- -----------------------
------------
--------- ---------------
--------- -
---------------------------------------------
--
---------- --------------- -------------
--
------ ----- ----------- -
------------------- -------------- -------------- ------- ------------- ------------- -
----------------------- - ------------
--------------------------- - -----
------------------------- - -----
-
---------- -
--------------------------------- ---------
-
-在上面的代码中，我们首先导入了 ToastyService 和 ToastyConfig。在 constructor 中，我们配置了 toasty 的主题、是否显示关闭按钮以及超时时间。在 addToast 方法中，我们使用了 toastyService 的 success 函数来添加一个成功消息。
配置
上面代码中的 toastyConfig 可以用来配置 toasty 的属性。以下是一些属性的含义：
- theme：主题，可以是 bootstrap、default 或者 material。
- position：弹窗的位置，可以是 top-left、top-right、bottom-left、bottom-right。
- showClose：是否显示关闭按钮，默认是不显示。
- timeout：弹窗的超时时间，毫秒为单位，默认是 5000 毫秒。
示例代码
以下是一个包含了多个弹窗的完整示例代码：
------ - --------- - ---- ----------------
------ - -------------- ------------- ------------- --------- - ---- -----------------------
------------
--------- ---------------
--------- -
---------------------
---------------------
---------------
------------------
----------------
------------------------
------- ---------- ------------ --------------------------------------------
------- ---------- ------------ --------------------------------------------
------- ---------- ----------- ----------------------------------------
--
---------- --------------- -------------
--
------ ----- ----------- -
-------- - ---------------
----- - --
------------------- -------------- -------------- ------- ------------- ------------- -
----------------------- - ------------
--------------------------- - -----
------------------------- - -----
-
----------------- -
----- ------------- ------------ - -
------ ----------
---- ------- --------
---------- -----
-------- -----
------ ------------
------ ------- ---------- -- -
------------------ - - -------- - - --- ---- ---------
--
--------- ------- ---------- -- -
------------------ - - -------- - - --- ---- -----------
-
--
-----------------------------------------
-
----------------- -
-------------------------------- -- - ------- -----------
-
--------------- -
------------------------------ -- -- ----- -----------
-
-结论
ng2-toasty-gamebench 是一个非常强大的 npm 包，它能够在我们的前端应用程序中快速地添加弹窗组件。通过本文的介绍，您已经可以很好地理解和使用 ng2-toasty-gamebench 包了。再次强调，记得阅读官方文档以获取更多详细信息。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562ee81e8991b448e0a2e