1. 前言
在前端开发中，有时需要在页面中展示一些异步操作的状态提示，譬如加载中、提交中等，这时候就需要一款能够简化开发的插件。今天我们要介绍的 angular2-busy-directive （以下简称 abd），就是这样一款优秀的插件，可以帮助我们快速实现异步操作状态提示功能。
2. abd简介
abd 是 Angular 中一款简单易用、高度定制的异步操作状态指示器，它可以为异步操作提供可视化的反馈，让用户获得更好的体验。使用 abd ，我们可以很轻松地添加一个半透明的遮罩层和一个旋转的 loader 图标到我们的视图中，以表明页面正在进行加载操作。
3. 安装及使用
安装
使用npm安装 abd 包：
npm install angular2-busy-directive --save
安装完成后，在 Angular 根模块中引入 BusyModule，并将其添加到 imports 数组中：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ---------- - ---- --------------------------
-----------
-------- -
--------------
-----------
--
------------- - ------------ --
---------- - ------------ -
--
------ ----- --------- - -使用
在需要显示加载状态的子组件中导入 busy 指令并声明，在对应的 HTML 模板文件中使用 busy 指令包裹加载状态的动态组件。示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- ----------
------------
--------- ---------
--------- -
-----------------
------- ------------------------------ -------------
---- -------------------
------------ -----
---- ---------------------
--------------
------------ --------------------------
----
--- ----------- ---- -- --------------------
-----
--------------
------
--
--
------ ----- ------------ -
------ -------- - ---
--------- - ------
--------------- -
-------------- - -----
---------------------------------------- -- -
-------------- - ------
---------- - ------- ------ -------
---
-
-在上述代码中，我们对 AppComponent 进行了定义，并在其中包含一个按钮和一个动态添加的列表。当用户点击按钮后，页面会显示加载状态提示直至数据加载完成。
4. 指令详解
busy
用于在需要显示加载状态的容器上声明，在容器所包含的异步操作开始时添加加载状态指示器。示例代码如下：
<div [busy]="isLoading"> <!-- 容器内容 --> </div>
其中 isLoading 属性控制该容器是否处于加载状态。
busyContext
用于为 busy 指令添加上下文信息，可接收以下参数：
- delay：延迟加载时间。示例代码如下：
-- -------------------- ---- -------
---- -------------------
------------ -----
---- ----- ---
--------------
------------ -----------------------------
---- ---- ---
--------------
------在上述代码中，延迟加载时间为 3 秒。
5. 总结
通过本文的介绍，相信大家已经初步掌握了如何使用 abd 插件实现异步操作状态指示器功能。当然，在真实的开发中，我们还可以更加灵活地使用该插件，以满足项目的具体需求。请大家多多尝试，加深对 abd 插件的理解和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d581e8991b448e02b5