今天，我想给大家介绍一个前端的 npm 包 test-ngx-toastr，它是一个非常实用的消息提示框组件，适用于 Angular 框架开发。本文将向大家详细讲解如何安装和使用该组件，以及一些常见问题和解决方法。
安装
使用 npm 命令进行安装：
npm install ngx-toastr
使用
在 Angular 应用程序的模块中导入 ToastModule：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ----------------------- - ---- --------------------------------------- ------ - ----------- - ---- ------------- ----------- -------- ------------------------- ----------------------- -------- ------------- -- ------ ----- ------------ --
导入 ToastService：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- -------------
------------
---
--
------ ----- ----------- -
------------------- ------- -------------- --
------------- -
-------------------------- -------- ------- -------
-
----------- -
----------------------------- -- -------- ------ ------- -
-------- -----
---
-
------------- -
------------------------ --- ----- -- ------ ---- ------- ---------- -
------------ -----
---
-
---------- -
---------------------- ---- ----------- --- -------
-
------------ -
------------------------- ------------- ----------- ------------- ----- -
----------- -----
-------- -----
------------ -----
------------ ----
---
-
-参数
默认情况下，该组件将使用全局配置，但是您可以通过向 show 方法传递一个选项参数来覆盖这些值。以下是一些常见的选项：
positionClass- 消息框的位置。默认用toast-top-right，可以使用toast-top-center、toast-top-full-width、toast-top-left、toast-top-right、toast-bottom-center、toast-bottom-full-width、toast-bottom-left、toast-bottom-right等。showDuration- 消息框持续时间（毫秒）。默认值为3000。hideDuration- 消息框隐藏的时间（毫秒）。默认值为1000。timeOut- 消息框持续时间和隐藏时间的总时间（毫秒）。默认值为5000。tapToDismiss- 用户是否可以点击消息框关闭它。可选值为true或false。默认值为true。
常见问题
如何修改消息框的样式？
可以通过给组件添加一个 class 的方式来修改样式：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- -------------
------ - -------------- - ---- -------------
------------
---
--
------ ----- ----------- -
------------------- ------- -------------- ------- --------------- --------------- -
---------------------------------------------- - ----------------------
--------------------------------------------- - -----
-
-如何控制消息框的显示？
可以通过 ToastRef 对象来控制消息框的显示和隐藏：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- -------- - ---- -------------
------------
---
--
------ ----- ----------- -
--------- ---------
------------------- ------- -------------- --
------ -
------------- - ----------------------- -------- ------- -------
-
------ -
-----------------------
-
-总结
test-ngx-toastr 是一个非常实用的 Angular 消息提示框组件，本文介绍了该组件的安装和使用方法，并提供了一些常见问题和解决方法，希望能对大家有所帮助。如果您有任何问题或建议，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a181e8991b448dfcf9