现在的 Web 应用需要更快的浏览体验,而异步加载和异步渲染是实现这种体验的关键。然而,在所有的请求和响应中,用户只会关心内容是否正在加载。为此,前端工程师需要学会使用一些工具来实现页面显示加载过程。
在 Angular 开发中,ng4-loading-overlay 是一个可以展示页面加载中状态的好工具。本文将详细介绍如何使用 ng4-loading-overlay 这个 npm 包,以及如何在 Angular 应用中将其添加到项目中。
ng4-loading-overlay 简介
ng4-loading-overlay 是一个基于 Angular2+ 的 npm 包,可以在应用程序中展示出 loading 状态。它会在你的应用程序加载资源时添加一个遮罩,就像你常常在许多网站中看到的那样。组件可以自定义界面元素,比如加载指示器、文本等。ng4-loading-overlay 还支持在加载时触发特定事件和钩子。
此外,ng4-loading-overlay 包含如下功能:
- 支持全局配置和随时可用的实例
- 支持使用 Provider 进行全局设置
安装 ng4-loading-overlay
首先,在终端中运行以下命令来使用 ng4-loading-overlay:
--- ------- ------------------- ------
接下来,通过 Angular CLI 创建一个新应用程序,并在根模块中导入并添加 Ng4LoadingSpinnerModule:
------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ----------------------- - ---- ---------------------- ----------- ------------- --------------- -------- - -------------- --------------------------------- -- ---------- -------------- -- ------ ----- --------- - -
在这个例子中,我们通过调用 forRoot() 方法来添加 ng4-loading-overlay 到应用程序。
文字说明
ng4-loading-overlay 很容易使用,只需要跟随以下步骤:
- 在应用程序中开启一个遮罩
- 加载应用程序所需的内容
- 移除遮罩
遮罩会覆盖整个应用程序并阻止用户在加载过程中进行任何操作。然而,可以按照用户自定义进行配置,以使其更适应你的项目。
创建实例
接下来,你需要在组件控制器中添加 ng4-loading-overlay 实例。你可以按照自己的需求声明一个变量,并且注入 Ng4LoadingSpinnerService 来使用:
------ - ---------- ------ - ---- ---------------- ------ - ------------------------ - ---- ---------------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ -- ------ ----- ------------ ---------- ------ - ------------------- --------------- ------------------------- -- ---------- - -- ---- ------- --------------------------- -- ----- ------- --------------------------- - -
在调用show()
方法后,loading-overlay 将会在应用程序上添加一个遮罩。在调用hide()
方法后,loading-overlay 将会在应用程序上移除这个遮罩。
配置
你可以设置 ng4-loading-overlay 的全局配置。具体可以设置的参数包括:
----------------- - --------------- ---------------- -------------------------- ------- ---------------------- ------- -------------------- -------- --------------- ------- ----------------- ------- ---------------- ------- --------------- ------- ----------- ------- ------------- -------------- ------------- -------------- -------------- ------- ----------------- ------------------ ------------ ------- ------------ ------- ------- ------- --- -----
你可以在根模块中使用forRoot()
方法来设置全局配置:
-------- - --------------------------------- ---------------- ----------------------------- ------------ ---- -------------- ---------- -------------- ---------- ---------------- ---------- --------------- ---------- --------------------- ------ -- --
或者在单个实例中进行配置:
------ - - -------------- ------------------------------ ------------------------- ---------- -------------- ---------- ---------------- ---------- --------------- ---------- ------------ ---- ---------------- -------------------------------- --------------------- ----- --
高级特性-自定义遮罩
ng4-loading-overlay 提供了定制遮罩的方法,以适应更多的场景。你可以使用CustomNg4LoadingSpinnerComponent
和Ng4LoadingSpinnerService
来创建和控制一个自定义遮罩页面。使用者可以自由定义背景和加载指示器。
以下是使用自定义组件的示例:
------ - --------- - ---- ---------------- ------ - ------------------------- -------------------------------- - ---- ---------------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ------- ---------- - --------------------------------- ------------------- --------------- ------------------------- -- ------------- - ----------------------------------------- - -------- ------------ --- ------------- -- - ------------------- -- ------ - ------------- - --------------------------- - -
自定义的组件可以像以下这样进行定义:
---- ------------------------------- ---- ----------------------- --------------------------- ------- ---- -------- ------
示例代码
下面是一个完整的示例,使用ng4-loading-overlay
在异步加载和异步渲染过程中添加一个加载遮罩层:
------ - ---------- ------- ------ - ---- ---------------- ------ - ---------- - ---- ----------------------- ------ - ------------------------- ----------------------- - ---- ---------------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ -- ------ ----- ------------ ---------- ------ - ------ ----- ---- ------- ---------- - ------------------------ ------------------- ----- ----------- ------- --------------- ------------------------- -- ---------- - --------------------------- ----------------------------------------------------------- -------------- -- - --------- - ---- --------------------------- --- - -
在上述示例中,每当一个 HTTP 请求进行时,show()
方法将会展示遮罩层,而在 HTTP 请求结束时,hide()
方法将会隐藏遮罩层。
总的来说,ng4-loading-overlay 很容易使用,并且可以在开发过程中使用,为用户提供更好的体验。而这个配置也是非常简单的,只需要花费很小的精力即可调整。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562dc81e8991b448e046c