概述
在前端开发中，我们常常需要实现页面上的loading效果。为了方便开发者使用，社区中出现了诸如 @ng-bootstrap/ng-bootstrap、ngx-spinner等多种loading组件。其中，@pratico/ngx-busy-indicator也是一款不错的组件，相比于其他组件，该组件具有以下优点：
- 灵活性高：可以同时移除多个loading效果
- 支持 RxJS：可以轻松使用 RxJS 的任何操作符
- 内置多种样式：支持多种样式，可根据自己的需求做出修改
这篇文章将介绍 @pratico/ngx-busy-indicator 的使用方法，以及如何将其应用到实际项目中。
安装
首先，在使用该组件前，我们需要在项目中安装 @pratico/ngx-busy-indicator 包，使用以下命令进行安装：
npm install --save @pratico/ngx-busy-indicator
安装完成后，您需要在打开的app.module.ts文件中将 BusyIndicatorModule 导入到您的应用程序中：
-- -------------------- ---- -------
------ - ------------------- - ---- ------------------------------
---
-----------
---
-------- -
---
------------------------------
---
--
---
--
------ ----- --------- - -使用
组件的 ngx-busy 指令可以附加到任何指定的 HTML 元素中，该元素在加载过程中将显示 loading 效果。下面是一个基本的代码示例：
<button ngx-busy [busy]="isLoading">Click me!</button>
在上面的示例中，我们为 button 元素添加了 ngx-busy 指令，并将 busy 属性设置为 isLoading。这意味着当 isLoading 的值为 true 时，该元素将显示 loading 效果，反之则不显示。
如果不需要在某个元素中显示 loading 效果，可以使用 ngx-busy-target 指令。
<ng-container *ngIf="!isLoading"> <div>Content here</div> </ng-container> <div *ngx-busy="isLoading" ngx-busy-target> This will become busy on isLoading === true </div>
在这个例子中，我们使用 *ngIf 来控制一个视图区域是否显示，而 *ngx-busy 指令则用于另一个 HTML 元素中。ngx-busy-target 指令用于告诉组件在哪里显示 loading 效果。
如果您需要同时在多个元素中显示 loading 效果，则可以使用 ngx-busy-overlay 指令。
<div *ngFor="let item of items" [ngx-busy-overlay]="isLoading">
{{ item }}
</div>在这个示例中，我们使用 *ngFor 创建了多个元素，而 ngx-busy-overlay 指令告诉组件在哪些元素中显示 loading 效果。
高级用法
除了常规的使用方法外，@pratico/ngx-busy-indicator 还支持更多高级用法。
可自定义样式
您可以轻松地自定义 loading 效果的样式，只需使用 busyConfig 配置即可：
import { BusyConfig } from '@pratico/ngx-busy-indicator';
export const busyConfig: BusyConfig = {
backdropBackgroundColour: 'rgba(0, 0, 0, 0.4)',
template: '<div class="custom-template"><i class="fas fa-spinner fa-spin"></i></div>',
delay: 200,
};在上面的代码中，我们定义了一个自定义的 busyConfig。其中，backdropBackgroundColour 表示 loading 效果的背景色，template 则表示了自定义的 loading 效果样式，delay 表示 loading 效果延迟消失的时间。
使用 RxJS
@pratico/ngx-busy-indicator 还支持使用 RxJS。您可以将 busy 属性绑定到一个 Observable，然后在该 Observable 中使用 RxJS 操作符以控制 loading 效果是否显示。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- ----- - ---- -------
------ - -------- - ---- -----------------
------------
--------- -----------
--------- -
------- ------------------------- -- -- ----- ----------------
---- ------------------ - ------ ------ ---------------
------- --------- ------------ - -- ------ -------- - - -------- --
------
--
--
------ ----- ------------ -
------- -------- ------------ - ------
-------- ----------------
--------- -
------------ - -----------------
----------- -- -
------------- -- -
-------------------- ---------
----------------- - -----
-- -----
--
--
-
-在这个示例中，当用户单击 "Click me to start loading" 按钮时，会生成一个 Observable，然后在 finalize 操作符中将 isLoading 置为 true。在这个操作中，我们还使用了 timeout 设置了一个延迟，以便能够更好地看到 loading 效果。
结论
虽然 @pratico/ngx-busy-indicator 功能强大，用途广泛，但是使用它并不复杂，只需要几个简单的步骤即可将其引入项目中，并进行使用。希望通过这篇文章能够帮您更好的掌握该组件的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558cb81e8991b448d6155