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