在开发前端应用的过程中，我们经常会需要在页面中显示 loading 状态，让用户知道应用正在加载数据。 osixia-angular2-busy 是一个用于 Angular 2+ 的开源组件库，可以让我们轻松地实现该功能，并且支持自定义样式和插件功能。
环境要求
使用 osixia-angular2-busy，我们需要先安装 Node.js 环境和 Angular CLI。
安装
运行以下命令来安装 osixia-angular2-busy 包：
npm install osixia-angular2-busy --save
使用
引入模块
在使用 osixia-angular2-busy 前，我们需要先引入它的模块。通常我们在 AppModule 中引入：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ---------- - ---- -----------------------
-----------
------------- ---------------
-------- -
--------------
--------------------
--------- -----
------- -----
------ ----
------------ ----
-------- ------- ---------
------------- ----------
--
--
---------- --------------
--
------ ----- --------- --在代码中，我们使用了 import { BusyModule } from 'osixia-angular2-busy'; 引入了 osixia-angular2-busy 的模块，然后在 imports 中加入了 BusyModule，并使用 forRoot 方法进行配置。
使用组件
在模板中使用 osixia-angular2-busy 组件非常简单，只需要添加 <ng-busy> 标记即可：
<ng-busy [busy]="myPromise"></ng-busy> <button (click)="onClick()">Load Data</button>
其中，[busy]="myPromise" 中的 myPromise 是的一个 Promise 对象，它控制了组件的显示和隐藏。
onClick() {
this.myPromise = this.http.get('https://jsonplaceholder.typicode.com/todos');
}在点击 "Load Data" 后，组件会显示 loading 状态，然后当 http 请求完成后，组件会自动隐藏。
自定义样式
osixia-angular2-busy 支持通过配置文件或单独样式文件来自定义样式。我们可以在 forRoot 方法中配置 wrapperClass 属性来自定义添加一个包装器样式，并在 custom-template 中通过添加对应的类名来定义自己的某些样式。
BusyModule.forRoot({
...,
wrapperClass: 'my-class'
})<div class="loader my-class"></div>
<ng-template #customTemplate>
<div class="my-class">
<div class="loader"></div>
<div class="message">{{message}}</div>
</div>
</ng-template>插件功能
osixia-angular2-busy 还支持通过 BusyConfig 类来进行更细致的配置。我们可以使用该类来添加自己的插件或扩展现有功能。
import { BusyConfig } from 'osixia-angular2-busy';
...
const busyConfig = new BusyConfig({
backdrop: true,
...
});
busyConfig.template = `<div class="loader"></div><div>{{message}}</div>`;
BusyModule.forRoot(busyConfig)在代码中，我们通过 BusyConfig 类来创建了一个新的配置文件，然后对其进行了相关的配置，最终使用 forRoot 方法进行应用。
总结
通过 osixia-angular2-busy 包，我们可以很方便地创建 loading 状态，自定义样式以及在应用中使用插件扩展。它极大地提高了我们在开发过程中的效率，唯一不足的地方在于它只能用于 Angular 2+ 中。
代码示例：https://stackblitz.com/edit/osixia-angular2-busy-example。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668181e8991b448e2a26