ng2-toastr-center-default 是一个基于 Angular 框架的 npm 包，用于快速集成在应用程序中实现顶部或底部位置的通知窗口。这个包的使用非常简单，本文将为大家详细介绍使用 ng2-toastr-center-default 的方法，帮助开发者们快速实现应用程序中的通知功能。
1. 安装
在开始之前，请确保您已经安装了 Node.js 和 Angular CLI。接着执行以下命令安装 ng2-toastr-center-default：
--- ------- ------------------------- ------
安装成功之后，我们就可以在项目中使用了。
2. 导入 ToastModule
在使用之前，我们需要在 AppModule 中导入 ToastModule，使用方法如下：
------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------- - ---- ---------------------------- ----------- -------- - -------------- --------------------- -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
3. 在应用程序中使用 ng2-toastr-center-default
现在我们可以在任何组件中使用 ng2-toastr-center-default 了。使用如下代码：
------ - --------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
------------------ ------- -------------- --
------------- -
------------------------- -----------------------------
-
-4. 消息类型
ng2-toastr-center-default 提供了四种消息类型。分别是：success, info, warning 和 error。使用方法如下：
----------------------------- -------------------------- ----------------------------- --------------------------
5. 消息选项
ng2-toastr-center-default 还支持自定义消息选项。使用方法如下：
------ - --------- - ---- ----------------
------ - -------------- ------------ - ---- ----------------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
------ -------- ------------ - -
-------- -------
-------------- -----------------------
-------- ----
--
------------------ ------- -------------- --
------------- -
------------------------- ---------------------------- ----- --------------
-
-如上代码所示，我们将消息选项作为第三个参数传递给方法。这里的选项是一个包含 animate, positionClass 和 timeout 等属性的对象。
- animate：消息出现和去除时的动画效果，默认值为 fade。
- positionClass：消息出现的位置，默认值为 toast-top-right。
- timeout：消息出现的时间，默认值为 5000 毫秒。
6. 示例
下面是一个示例，演示了如何在 Angular 中使用 ng2-toastr-center-default 实现通知功能。
------ - --------- - ---- ----------------
------ - -------------- ------------ - ---- ----------------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
------ -------- ------------ - -
-------- -------
-------------- -----------------------
-------- ----
--
------------------ ------- -------------- --
--------------- -
------------------------------- ----- --------------
-
--------------- -
-------------------------------- ----- --------------
-
------------- -
-------------------------------- ----- --------------
-
-7. 总结
本文介绍了如何使用 ng2-toastr-center-default 实现 Angular 应用程序中的消息通知功能。我们可以通过引入 ToastModule 模块，并在组件中调用 ToastsManager API 来实现不同类型的消息通知。在使用时，我们还可以设置不同的消息选项，如动画效果、位置和显示时间等。
值得注意的是，ng2-toastr-center-default 消息的实现原理是基于 Bootstrap Notify。因此，如需定制消息样式和动画效果，请参考 Bootstrap Notify 的文档。
现在，您已经可以尝试使用 ng2-toastr-center-default 完成自己的应用程序中的通知功能了！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005739a81e8991b448e98be