前言
ngx-toastr 是一个非常流行的 Angular 通知框框架，它可以方便地向用户提供各种类型的通知，如成功提示、错误提示和警告提示等，使得 Angular 前端开发更加便捷。本文将介绍如何使用 ngx-toastr 实现各种类型的通知。
安装
为了使用 ngx-toastr，您需要首先安装它。在命令行中执行以下命令即可：
npm install ngx-toastr --save
这将安装 ngx-toastr 可用的最新版本。
导入
安装完毕后，您需要在 Angular 应用程序中导入 ngx-toastr 模块，以便您的组件可以使用 toastr 服务。在 app.module.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - ----------------------- - ---- ---------------------------------------
------ - ------------ - ---- -------------
-----------
-------- -
------------------------
----------------------
-
--
------ ----- --------- - -现在，您可以在任何组件中使用 toastr 服务。
使用
要显示通知框，您需要使用实例化 toastr 服务后的实例来显示一个通知框， 这可以通过在组件构造函数中注入 ToastrService 来实现，如下所示：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- -------------
------------
--------- -----------
--------- -
------- ---------------------------- --------------
--
--
------ ----- ------------ -
------------------- ------- -------------- --
------------- -
--------------------------- --------------
-
-在上述代码中，我们在 AppComponent 中注入了 ToastrService，然后在一个按钮的 click 事件中调用 showSuccess 方法来触发显示通知框。在 showSuccess 方法中，我们简单地调用 ToastrService 的 success 方法，并将消息传递给它。
其他类型的通知
类似于 success 方法，ToastrService 还提供了其他类型的方法来显示不同类型的通知框：
error()显示错误通知框info()显示信息通知框warning()显示警告通知框
在这些方法中，您可以使用以下添加一个选项对象，来添加更多的个性化设置：
-- -------------------- ---- -------
----------- -
-------------------------- -------- -
-------- -----
------------ -----
------------------ -------------
------------ -----
-------------- -----------------
---
-在示例代码中，我们使用 “Oops!” 作为标题，然后对通知框进行了一些个性化设置，以便更好地符合您的视觉需求。
总结
通过使用 ngx-toastr 包，您可以方便地在 Angular 应用程序中实现各种类型的通知框。在本文中，我们介绍了如何安装和使用 ngx-toastr，并提供了示例代码来帮助您更好地了解如何实现不同类型的通知框。无论您是要向用户提供成功提示、错误提示还是警告提示，ngx-toastr 都是您的不二之选。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62076