简介
@ngx-loading-bar/http 是一个 Angular 的第三方 npm 包，用于实现 HTTP 请求时的进度条显示。使用该包可以方便地增加一个进度条，让用户知道页面正在加载中，并且能够清晰地看到当前加载进度。本文将介绍如何使用该包。
安装
使用 npm 进行安装：
npm install @ngx-loading-bar/http --save
使用
注册
在应用的 app.module.ts 中引入 ngx-loading-bar 服务，并把它加入 imports 数组：
// app.module.ts
import { NgModule } from '@angular/core';
import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http';
@NgModule({
imports: [LoadingBarHttpClientModule],
})
export class AppModule {}等待 HTTP 请求
当有 HTTP 请求发出时，ngx-loading-bar 应该开始工作并显示进度条。由于 ngx-loading-bar 拦截了 Angular 的 HttpClient，所以你不必在你的代码中做任何修改。只需在运行时访问您的 HTTP 服务，即可看到进度条。
仅在特定的 HTTP 请求上启动其操作
您可以在 HTTP 请求时使用自定义的配置项启用 ngx-loading-bar。只需将 true 传递给该请求的配置。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- ----------------
--------- -
------- ------------------------- -----------
--
--
------ ----- ----------------- -
------------------- ----- ----------- --
--------- -
----- --- - -----------------------------------------------
------------------ - -------- ---- ------------------- -- -
------------------
---
-
-自定义进度条设置
您可以通过传递自定义选项来覆盖默认选项。
-- -------------------- ---- -------
-- -------------
------ - -------- - ---- ----------------
------ - -------------------------- - ---- ------------------------
------ - ---------------------- - ---- --------------------------
-----------
-------- -
------------------------------------
----------------- ----
----------- -----
-------- - ------------------- --
--------------- ------
---
-----------------------
--
--
------ ----- --------- --总结
@ngx-loading-bar/http 是一个功能强大的 Angular 进度条工具包。在使用它时，只需遵循上文提供的几个步骤就可以方便地为您的应用程序实现进度条。它不仅能够显著提高性能，还能增加用户体验，让您的用户感受到更好的交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671cc30d0927023822834