现在的 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:
npm install ng4-loading-overlay --save
接下来，通过 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来创建和控制一个自定义遮罩页面。使用者可以自由定义背景和加载指示器。
以下是使用自定义组件的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------------- -------------------------------- - ---- ----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------- ---------- - ---------------------------------
------------------- --------------- ------------------------- --
------------- -
----------------------------------------- - -------- ------------ ---
------------- -- -
-------------------
-- ------
-
------------- -
---------------------------
-
-自定义的组件可以像以下这样进行定义：
<div class="demo-spinner-container">
<img src="./assets/logo.png" class="demo-spinner-image">
<div>{{ text }}</div>
</div>示例代码
下面是一个完整的示例，使用ng4-loading-overlay在异步加载和异步渲染过程中添加一个加载遮罩层：
-- -------------------- ---- -------
------ - ---------- ------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ------------------------- ----------------------- - ---- ----------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ ---------- ------ -
------ ----- ----
------- ---------- - ------------------------
------------------- ----- ----------- ------- --------------- ------------------------- --
---------- -
---------------------------
-----------------------------------------------------------
-------------- -- -
--------- - ----
---------------------------
---
-
-在上述示例中，每当一个 HTTP 请求进行时，show()方法将会展示遮罩层，而在 HTTP 请求结束时，hide()方法将会隐藏遮罩层。
总的来说，ng4-loading-overlay 很容易使用，并且可以在开发过程中使用，为用户提供更好的体验。而这个配置也是非常简单的，只需要花费很小的精力即可调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562dc81e8991b448e046c