当使用 Angular 构建 Web 应用时，处理 HTTP 请求是经常遇到的问题。而 npm 包 bargz-ng-http-loader 可以为 Angular 应用添加一个优美的加载器，使得页面更加友好。在本文中，我们将学习如何使用 bargz-ng-http-loader。
安装
在项目中使用 npm 安装 bargz-ng-http-loader：
npm install bargz-ng-http-loader --save
引入模块
在 app.module.ts 中，导入 BargzNgHttpLoaderModule 模块并将其添加到 imports 数组中：
import { BargzNgHttpLoaderModule } from 'bargz-ng-http-loader';
@NgModule({
imports: [
BargzNgHttpLoaderModule,
]
})
export class AppModule { }配置
在 app.module.ts 中，需要配置 BargzNgHttpLoader：
-- -------------------- ---- -------
------ - ----------------------- - ---- -----------------------
-----------
-------- -
---------------------------------
----- ---
---------------- ----------
------ ---------------------------
------------ ---
----------- ---
------------ ---
- -- -------------------------
-
--
------ ----- --------- - -在这里，我们可以自定义加载器的模式、背景颜色、图片等等。您可以像上面的例子一样选择您自己的配置。
实现
现在，我们可以在项目中使用 BargzNgHttpLoader 服务来为 HTTP 请求添加加载动画。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------------------ - ---- -----------------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ ---------- ------ -
----- - ----------------------------
----- -------
------------
------- ------------------ -------------------------
------- ----- -----------
- - -
---------- -
----------------------------------------
------------------------------------------------- -- -
--------- - ---------------
---
---------------------------------------
-
-在这里，我们注册这个加载器，使用 HTTP 请求加载数据，再次关闭这个加载器。
<div class="container" [bargzNgHttpLoader]="{type: 'full-screen', show: true}">
<h3>{{title}}</h3>
<p>{{data}}</p>
</div>在组件 HTML 中，将指令 [bargzNgHttpLoader] 添加到 div 标签中。这个指令指定载入器类型和载入状态。
完成之后，您可以在浏览器中查看您的应用并观察加载器的效果。
结论
在本文中，您学习了如何使用 bargz-ng-http-loader 来为 Angular 应用程序的 HTTP 请求添加加载器。这不仅可以使您的应用程序更加友好，而且可以让用户更轻松地浏览页面。现在，您可以在自己的项目中应用 bargz-ng-http-loader 并体验它的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f71238a385564ab67c9