前言
在前端页面展示提示信息是非常常见的，为了避免重复造轮子，前端开发者们开发了很多优秀的第三方组件库。
@raisiqueira/ng-toast-cdk 是一个简单易用的 Angular Toast 组件库。该库提供了一套基于 Angular CDK 的模板方法生成 Toast，可以轻松应对常见的展示需求。
本篇文章介绍了 npm 包 @raisiqueira/ng-toast-cdk 的使用方法，适合初学者参考使用。
安装
--- ------- ------ -------------------------
引入
在 Angular 项目的 app.module.ts 文件中添加：
------ - ---------------- - ---- ----------------------------
-----------
-------- -
----------------
-
--
------ ----- --------- - -使用
@raisiqueira/ng-toast-cdk 提供了 NgToastService 和 NgToastRef 两个服务参与 Toast 的生成。
NgToastService
通过 NgToastService 发起 Toast 的展示。下面是 NgToastService 的方法：
show(message: string, config?: ToastConfig): NgToastRef
展示一个 Toast，返回 NgToastRef 实例。
message: Toast 展示的文本信息。config: Toast 的配置选项，具体见下面的配置项。默认为ToastConfig的一个实例。
--------- ----------- - ---------- ------- -- -------- ------ ---------- ----- - --------- -- -------- -------- --------- --------- -- ----- ------------- -------- -- --------------- ---- -
示例代码：
------ - -------------- - ---- ----------------------------
------------
--------- -------------------
------------ --------------------------------
---------- ---------------------------------
--
------ ----- ----------- -
------------------- --------------- --------------- --
----------- -
----- -------- - -------------------------------- ---------
-
-NgToastRef
NgToastRef 实例持有了当前展示的 Toast 对象。可以通过该实例对 Toast 进行关闭、重新设置、添加类样式等操作。下面是 NgToastRef 的方法：
close()
关闭当前 Toast。
----- -------- - -------------------------------- --------- -----------------
setMessage(message: string)
更改正在展示的 Toast 文本信息。
----- -------- - -------------------------------- --------- ---------------------------- -- -- ---------
addClass(...classNames: string[])
为当前 Toast 添加类样式。
----- -------- - -------------------------------- --------- ------------------------------------
removeClass(...classNames: string[])
为当前 Toast 移除某个类样式。
----- -------- - -------------------------------- --------- ---------------------------------------
总结
本文介绍了 @raisiqueira/ng-toast-cdk 的使用方法。通过本文的学习，读者可以掌握 @raisiqueira/ng-toast-cdk 的主要功能和 API 接口。在后续的开发过程中，读者可以依据项目需求进行相关的配置和调整，灵活地使用这一强大的组件库。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600673defb81d47349e53bab