前言
qs-angular2-busy 是一个 Angular2 的插件，它能够帮助你在异步请求发生的时候展示一个 loading 效果，以增加用户体验。本文将介绍如何安装和使用这个 npm 包。
安装
可以通过 npm 进行安装：
npm install qs-angular2-busy --save
引入
在使用之前，需要在模块中引入 BusyModule：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ---------- - ---- -------------------
-----------
------------- ---------------
-------- -
--------------
----------
--
---------- --------------
--
------ ----- --------- - -使用
在模板中使用 busy 指令即可：
<button type="submit" [busy]="submitting">Submit</button>
当 submitting 变量为 true 时，按钮会显示 loading 效果。
同时，还可以加入其他属性，以自定义 loading 效果：
<button type="submit"
[busy]="submitting"
busyMessage="正在上传"
[busyBackdrop]="false"
busyMinDuration="1000">
Submit
</button>busyMessage：loading 显示的文本；busyBackdrop：loading 是否开启半透明遮罩；busyMinDuration：loading 最短持续时间（毫秒），超过最短时间才会显示 loading 效果。
示例
下面是一个完整的例子，包括如何处理异步请求：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
--------- -
----- ----------------------
------ ---------------------- -----------------
------ ---------------------- -----------------
------- ------------- -----------------------------------
-------
-
--
------ ----- ------------ -
--------- -------
--------- -------
----------- --------
------------------- ----- ----------- --
---------- -
--------------- - -----
---------------------------- ---------- -------------- --------- ---------------
-----------
----- -- -
-----------------
--------------- - ------
--
----- -- -
-------------------
--------------- - ------
-
--
-
-当点击 Submit 按钮后，loading 效果会在请求结束前一直显示，请求结束后 loading 效果消失。
总结
本文介绍了如何使用 qs-angular2-busy 这个插件来增强用户体验。在开发过程中，使用好用的 npm 包能够提高效率和代码质量，也是我们提高技术水平的一个途径。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f82238a385564ab6bc7