在前端开发中，常常会用到 Toastr 套件来实现消息提示的功能。ng6-toastr 正是通过对 Toastr 进行封装，使其能够更方便地在 Angular 6 项目中使用。
安装 ng6-toastr
使用 npm 工具，我们可以很容易地安装 ng6-toastr：
npm install ng6-toastr --save
集成 ng6-toastr
在 Angular 6 项目中，我们需要在 app.module.ts 文件中引入 ToastrModule 模块。可以像这样：
-- -------------------- ---- -------
------ - ------------ - ---- -------------
-----------
------------- -
------------
--
-------- -
--------------
----------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用 ng6-toastr
在之前我们已经引入了 ToastrModule 模块，接下来我们需要在组件中调用 ToastrService ，实现消息提示的功能。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- -------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------- -------------- --
------------- -
------------------------- -- - ------- ---------- -----------
-
----------- -
----------------------- -- -- ----- ---------- ---------
-
------------- -
------------------------- -- - ------- ---------- -----------
-
---------- -
---------------------- -- -- ---- ---------- --------
-
-我们在组件中定义了四个方法 showSuccess、showError、showWarning 和 showInfo 用于不同类型的消息提示。这些方法中都是通过 ToastrService 的方法来实现提示功能的。
自定义 Toastr 组件
ng6-toastr 提供了默认的提示样式，但是我们需要自定义样式时，可以在 ToastrModule 模块的 forRoot() 方法中，通过传入一个对象，来设置 Toastr 组件的默认配置。
ToastrModule.forRoot({
timeOut: 3000,
positionClass: 'toast-bottom-right',
preventDuplicates: true,
})在自定义配置中，我们可以设置提示框显示的位置、显示时长、是否允许重复提示。
指定 Toastr 组件容器
在默认情况下，ng6-toastr 会在 Body 中创建一个提示框，但是我们可以将提示框插入到任何 HTML 元素中。
<div id="toast-container"></div>
ToastrModule.forRoot({
timeOut: 3000,
positionClass: 'toast-top-right',
preventDuplicates: true,
containerId: 'toast-container'
})我们通过 containerId 属性来指定组件容器的 DOM 元素 ID，以实现将提示框插入到特定的 HTML 元素中。
总结
ng6-toastr 是一个非常方便，易于使用、快速集成到 Angular 6 项目中的 Toastr 套件。通过本文介绍的安装、集成和使用方法，相信大家能够轻松地在自己的项目中使用 ng6-toastr 实现消息提示和弹窗功能。
如果您需要更多的 Toastr 套件的相关知识，请访问 Toastr 官网：https://codeseven.github.io/toastr/。如果您有任何问题或建议，欢迎留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/ng6-toastr