Angular-Toastr 是一个基于 Angular 的通知消息库，它可以帮助开发者在前端构建强大的提示功能。本文将详细介绍如何使用 Angular-Toastr 牌包。
安装
首先，通过 npm 安装 Angular-Toastr:
npm install angular-toastr --save
然后，在 Angular 项目中导入 Toastr 模块:
-- -------------------- ---- -------
------ - ----------------------- - ---- ---------------------------------------
------ - ------------ - ---- -------------
---
-----------
-------- -
------------------------
-----------------------
---
--
--
------ ----- --------- - -使用
接下来就可以在组件中使用 Toastr 服务了。例如，我们想在一个按钮点击事件中弹出一个成功消息：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- -------------
-----------------
------ ----- ----------- -
------------------- ------- -------------- --
------------- -
--------------------------- ------
-
-Angular-Toastr 还提供了很多其它类型的消息提示，比如 error、warning、info 等等，可以像上面代码一样进行调用。
此外，Angular-Toastr 支持自定义消息的参数，这使得开发者可以更细致地控制消息的呈现。下面是一个例子，它使用了不同的配置参数：
this.toastr.success('操作成功', '提示', {
timeOut: 3000,
progressBar: true,
progressAnimation: 'increasing'
});高级使用
Angular-Toastr 还提供了更多的高级用法，比如：
自定义模板
通过自定义消息模板，可以让消息的呈现更加灵活。比如，下面是一个例子，它使用了 Bootstrap 样式：
<ng-template #customNotification let-notification>
<div class="toast-header bg-primary text-white">
<strong class="mr-auto">{{ notification.title }}</strong>
</div>
<div class="toast-body">
{{ notification.message }}
</div>
</ng-template>在组件中调用时指定该模板：
this.toastr.show(
'', '',
{
timeOut: 3000,
toastComponent: customNotification,
title: '操作成功',
message: '您已成功完成操作！'
});全局配置
除了单个消息的自定义参数外，还可以对 Toastr 的全局配置进行修改。比如，下面的代码将修改 Toastr 的默认配置：
ToastrModule.forRoot({
timeOut: 5000,
positionClass: 'toast-bottom-right',
preventDuplicates: true,
closeButton: true,
})结语
Angular-Toastr 是一个非常实用的前端工具库，它能帮助开发者构建出好看、易用的提示功能。本文从安装开始详细介绍了 Angular-Toastr 的使用方法，并且演示了一些高级用法。如果你正在寻找一款优秀的消息提示库，那么 Angular-Toastr 绝对值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35103
