在前端开发中，我们经常会用到各种第三方库来辅助我们开发。其中，npm 包是其中最常见的一种。今天，我们来介绍一个名为 angular2-toaster-bettericons 的 npm 包，它可以帮助我们更方便地在 Angular 应用中添加 toast 提示框，并提供了更好的图标支持。
安装 angular2-toaster-bettericons
首先，我们需要先安装此 npm 包。在控制台中输入以下命令：
--- ------- ----------------------------
导入模块
接下来，在需要使用 toast 提示框的模块中，我们需要导入 angular2-toaster-bettericons 模块。
------ - ------------- - ---- -------------------------------
-----------
-------- -
-----------------------
--
-- ---
--
------ ----- --------- - -在这里，我们将 ToasterModule 添加到 imports 数组中，并调用了 forRoot 方法。这样，我们就可以使用 angular2-toaster-bettericons 提供的 toast 服务了。
添加 toast 提示框
接下来，我们就可以开始添加 toast 提示框了。
------ - --------- - ---- ----------------
------ - -------------- - ---- -------------------------------
------------
-- ---
--
------ ----- ----------- -
------------------- --------------- --------------- --
------------ ---- -
---------------------------------- ------ ---- ------ -----
-
-在这里，我们通过依赖注入方式获取了 ToasterService，并在 showToast 方法中使用 pop 方法添加了一条成功的 toast 提示框。其中，第一个参数表示 toast 类型，第二个参数为标题，第三个参数是内容。
图标支持
除了基本的 toast 提示框功能之外，angular2-toaster-bettericons 还提供了更好的图标支持。我们可以使用自定义图标或者内置图标。
自定义图标
首先，我们需要在 HTML 中引入自己的图标。
-----
------
-- -------------
---- ------- ---
----
-------
------然后，在调用 pop 方法时，我们可以通过 iconClass 属性绑定自定义图标的 CSS 类名。
------------------------- ----- ---------- ------ ------ ---- ----- ------ ---- ---------- ---------------- ---
内置图标
除了自定义图标之外，angular2-toaster-bettericons 还提供了一些内置图标。我们可以通过设置 icon 属性来使用这些内置图标。
------------------------- ----- ---------- ------ ------ ---- ----- ------ ---- ----- --------- ---
在这里，我们使用了内置的 warning 图标。除此之外，还有其它一些内置图标可供使用。
总结
通过本文的介绍，我们了解了如何使用 angular2-toaster-bettericons 这个 npm 包，并掌握了如何在 Angular 应用中添加 toast 提示框和图标。希望读者能够通过本文学到有用的知识，提升自己的前端开发能力。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056ae181e8991b448e52d1