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