ngx-angular-loading 是一个 Angular 组件，用于在加载数据时显示加载动画。它是一个 NodeJS 模块，可以通过 npm 安装。本文将介绍如何使用 ngx-angular-loading，包括安装、引用以及相关配置。
安装
使用 npm 可以很方便地安装 ngx-angular-loading。在命令行中输入以下命令即可安装：
npm install ngx-angular-loading --save
在安装成功后，指定的 ngx-angular-loading 模块将会被下载并保存到项目目录中，并且在系统的 package.json 文件中记录。
引用
完成安装后，需要在模块中引用 ngx-angular-loading 模块才能使用它提供的组件。在需要使用 ngx-angular-loading 的模块中进行如下引用：
import { LoadingBarModule } from 'ngx-angular-loading';
@NgModule({
imports: [ LoadingBarModule ]
})
export class AppModule { }但是由于它是单例的，所以不必在每个模块中都进行引用，只需要在根模块中引用一次即可。
配置
使用 ngx-angular-loading 需要进行相应的配置，这决定了它的显示样式等。配置在应用的主组件中指定，通过提供 LoadingBarConfig 对象的实例来进行配置。
import { LoadingBarConfig } from 'ngx-angular-loading';
export class AppComponent {
constructor(private config: LoadingBarConfig) {
config.color = 'red'; // 设置加载条颜色为红色
config.height = '5px'; // 设置加载条高度为 5 像素
}
}此外，还可以设置如下的配置项：
color：设置加载条颜色，默认为"#29d"。height：设置加载条高度，默认为"2px"。
以上两个配置项属于全局配置项，即应用的所有加载条都会应用这些设置。当然，也可以为每个组件单独进行配置。
使用
ngx-angular-loading 非常容易使用，只需要在需要显示加载动画的地方添加 <ngx-loading-bar></ngx-loading-bar> 标签即可。例如：
<ngx-loading-bar></ngx-loading-bar> <div class="content"> <p>这里是页面内容……</p> </div>
该标记自动在数据加载时显示一个加载条，并在数据加载完成后自动隐藏它。
手动启动加载动画
除了自动启动， ngx-angular-loading 也可以在需要时手动进行启动。这种情况下，需要在应用程序组件中注入 LoadingBarService 服务，并在需要时在代码中调用它的 start() 方法：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- ----------------------
------------
--------- -----------
--------- -
------- -----------------------------------
-----------------------------------
---- ----------------
--------------
------
-
--
------ ----- ------------ -
------------------- ------------------ ------------------ - -
--------- -
-------------------------------
------------- -- -
------------------------------
-- ------
-
-以上代码在点击按钮后启动加载动画，并在 2 秒后停止。
示例代码
以下是一个完整的使用 ngx-angular-loading 的示例：
app.component.html 文件：
<button (click)="onClick()">触发加载动画</button> <ngx-loading-bar></ngx-loading-bar> <div class="content"> <p>这里是页面内容……</p> </div>
app.component.ts 文件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- ----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------------------ ------------------ - -
--------- -
-------------------------------
------------- -- -
------------------------------
-- ------
-
----- - ---------
-app.module.ts 文件：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- ----------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -以上示例中，在按钮点击时启动了加载动画，在 2 秒后停止。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c4181e8991b448ebc6e