介绍
@naisone/ngx-toastr 是一个基于 Angular 框架的 toast 组件。它提供了简单易用的 API 并且支持多种配置选项。通过使用这个库我们可以在页面中快速的添加提示信息，展示成功信息、错误信息等等。
使用步骤
本文讲解如何在 Angular 项目中使用 @naisone/ngx-toastr。
1. 安装@naisone/ngx-toastr
可以通过 npm 安装 @naisone/ngx-toastr
npm install @naisone/ngx-toastr --save
2. 导入@naisone/ngx-toastr
在需要使用 @naisone/ngx-toastr 的组件中，导入ToastrService，我们通常选择在 app.module.ts 中全局提供 ToastrService。
-- -------------------- ---- -------
------ - ------------ - ---- ------------------
------ - -------- - ---- ----------------
------ - ----------------------- - ---- ---------------------------------------
------ - ------------ - ---- ----------------------
-----------
------------- -
------------
--
-------- -
------------------------ -- -------- ---------- ------
----------------------- -- ------------ -----
--
---------- -
-------------
--
---------- --------------
--
------ ----- --------- - -这里采用了全局配置的方式，通过ToastrModule.forRoot()方法传入的参数配置全局的 toastr，ToastrService指定在全局中使用的服务。
3. 在组件中使用 ToastrService
通过以下代码展示了 ToastrService 的基本使用
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- ----------------------
------------
--------- ------------
--------- -
---- --------------------
------- ----------------------------------------
------- ------------------------------------
------
-
--
------ ----- -------------- -
------------------- ------- -------------- --
------------- -
-------------------------- -------- ------------
-
----------- -
------------------------ -------- ----------
-
-代码中通过 ToastrService 的 success 和 error 方法展示了两种不同提示，使用方法非常简单。
4. 对 toastr 进行各种配置
@naisone/ngx-toastr 还提供了更多的配置项
4.1 配置文本信息
this.toastr.info('Here is some info for you', 'Info',{
closeButton:true,
progressBar:true,
})以上配置可以在成功信息的右上角添加一个关闭按钮，并在下部展示百分比进度条。
4.2 配置持续时间
this.toastr.warning('warning', 'alert',{
timeOut : 5000,
progressBar:true,
})以上配置可以设置 toastr 持续时间，在上部展示进度条。
4.3 配置可点击的 toast
this.toastr.info('Hello world!', 'Toast',{
enableHtml:true,
progressAnimation:"increasing",
tapToDismiss:true,
})以上配置值得注意的是，启用了 enableHtml 属性之后，可以在 toast 内部添加 html，如：
this.toastr.info('<b>Hello world!</b>', 'Toast',{
enableHtml:true,
})4.4 为 toastr 提供一种行为
用于收集 toast 的队列被称为 toast container，它可以设置 toastr 的出现方式。
this.toastr.warning('Hello world!', 'Toast',{
toastClass:'custom-bootstrap',
positionClass: 'toast-bottom-right',
closeButton:true,
preventDuplicates:true,
extendedTimeOut:2000,
tapToDismiss:true,
})更多配置可以参考官方文档。
结束语
通过学习，我们可以看到 @naisone/ngx-toastr 在 toast 的显示方面提供了很多的配置，如颜色、位置、动画等。学习这个库能够为我们寻找一种优化用户体验的方法。毕竟，一个好的提示框能够大幅度增强用户体验的流畅度和了解程度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057b3181e8991b448eb7ff