前言
在前端开发中，我们经常会使用 Angular 框架，以及一些实用的模块来加速开发进程。其中，angular-toastr 是一个比较实用的 toast 弹出框组件，但是在 TypeScript 项目中引入时，需要引入其类型声明文件才能正确的使用组件 API，这时我们就可以使用 @types/angular-toastr 这个 npm 包。
本篇教程将介绍如何使用 npm 包 @types/angular-toastr，并提供一些示例代码帮助读者更好的理解。
安装
首先，我们需要在项目中安装该 npm 包，可以使用如下命令进行安装：
npm install --save-dev @types/angular-toastr
使用
接下来，我们就可以在 TypeScript 文件中正确的引入并使用 angular-toastr 组件 API 了。示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- -------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------- -------------- -
-
------------- -
-------------------------- -------- -----------
-
-在上面的代码中，我们首先引入了 ToastrService，然后在组件的构造函数中将其注入，接着我们可以调用 toastr.success 方法来弹出一个成功的提示框。
API
ToastrService 提供了以下 API：
success(message: string, title?: string, override?: Partial<individualconfig>): ActiveToast
成功提示框。
- param message：消息内容，默认为 ''。
- param title：消息标题，默认为 ''。
- param override：配置选项。
- return：Toast 实例。
info(message: string, title?: string, override?: Partial<individualconfig>): ActiveToast
信息提示框。
- param message：消息内容，默认为 ''。
- param title：消息标题，默认为 ''。
- param override：配置选项。
- return：Toast 实例。
warning(message: string, title?: string, override?: Partial<individualconfig>): ActiveToast
警告提示框。
- param message：消息内容，默认为 ''。
- param title：消息标题，默认为 ''。
- param override：配置选项。
- return：Toast 实例。
error(message: string, title?: string, override?: Partial<individualconfig>): ActiveToast
错误提示框。
- param message：消息内容，默认为 ''。
- param title：消息标题，默认为 ''。
- param override：配置选项。
- return：Toast 实例。
配置选项
ToastrService API 中传入的 override 参数，用来设置 toast 提示框的一些配置。以下是可配置的选项：
- positionClass：弹出框的位置，默认为 'toast-top-right'。
- progressBar：是否显示一个进度条，默认为 false。
- closeOnClick：是否在点击弹出框时关闭它，默认为 true。
- timeOut：自动关闭弹出框的时间间隔，默认为 5000。
- extendedTimeOut：当鼠标悬浮在弹出框上时，弹出框自动关闭的时间间隔。
- enableHtml：是否支持在消息中使用 HTML 标签，默认为 false。
- showEasing：弹出框显示的缓动效果，默认为 swing。
- hideEasing：弹出框关闭的缓动效果，默认为 linear。
- showMethod：弹出框显示的方式，默认为 fadeIn。
- hideMethod：弹出框关闭的方式，默认为 fadeOut。
- onActivateTick：是否立即绘制 toast 弹出框，默认为 false。
示例代码
下面是一个基于 Angular 8 和 @types/angular-toastr 的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- ---------------- - ---- -------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------- -------------- -
-
------------- -
----- -------- ------------------------- - -
-------- -----
------------ ----
--
-------------------------- -------- ---------- ---------
-
-在上述代码中，我们使用了 ToastrService 的 success 方法，并传入了一个配置选项 options，用来设置进度条的时间间隔和是否开启进度条。
总结
@types/angular-toastr 提供了 TypeScript 项目中引入 angular-toastr 的类型定义，使我们能够更方便、更精确地使用这个实用的 toast 组件。通过本篇文章，读者可以快速上手并使用该组件，并且掌握如何传递配置选项来自定义组件的行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc158b5cbfe1ea0611d84