什么是 angular2-busy-aot?
angular2-busy-aot 是一个用于显示加载状态的组件库。它是基于 Angular 2 开发的库，可以帮助你很方便地实现页面的加载动画效果。
安装 angular2-busy-aot
在使用 angular2-busy-aot 之前，我们首先需要安装它。我们可以在命令行中输入以下命令来安装 angular2-busy-aot：
npm install angular2-busy-aot --save
导入 angular2-busy-aot
在使用 angular2-busy-aot 之前，我们需要导入它。我们可以在 app.module.ts 文件中导入它：
-- -------------------- ---- -------
------ - ---------- - ---- --------------------
-----------
-------- -
-- ---
-----------
-- ---
--
-- ---
--
------ ----- --------- - -使用 angular2-busy-aot
在导入了 angular2-busy-aot 后，我们可以开始使用它了。我们可以在组件中使用它来实现页面加载时的动画效果。
<ng-busy [busy]="isBusy"></ng-busy>
-- -------------------- ---- -------
------ ----- ----------- -
------- ------- - -----
------------- -
------------- -- -
----------- - ------
-- ------
-
-在上面的代码中，我们在 MyComponent 的构造函数中设置了一个 setTimeout，让 isBusy 的值在 3 秒后变成 false。这样就可以显示出加载动画效果了。
配置 angular2-busy-aot
在使用 angular2-busy-aot 时，我们可以对其进行配置。我们可以在 NgModule 中对其进行配置。
-- -------------------- ---- -------
------ - ---------- - ---- --------------------
------ -------- ------------------- -
------ --- ------------
-------- -------------
--------- -----
--------- -
---- --------------------
---- ------------------------ ---------------- --
------- ------- --------
------
-
---
-
-----------
-------- -
-- ---
--------------------------------------
-- ---
--
-- ---
--
------ ----- --------- - -在上面的代码中，我们创建了一个 busyConfigFactory 方法，用来返回一个 BusyConfig。在 BusyConfig 中可以配置一些参数，比如 message、backdrop、template 等。
总结
通过本文的介绍，我们了解了 angular2-busy-aot 的使用方法、配置方法等。通过使用 angular2-busy-aot，我们可以简单地实现页面加载时的动画效果，提升用户体验。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
------ - ---------- -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- ---------- - ---- --------------------
------ -------- ------------------- -
------ --- ------------
-------- -------------
--------- -----
--------- -
---- --------------------
---- ------------------------ ---------------- --
------- ------- --------
------
-
---
-
------------
--------- ---------
--------- -
-----
------ --------
-------- --------------------------
------
--
--
------ ----- ------------ -
------- ------- - -----
------------- -
------------- -- -
----------- - ------
-- ------
-
-
-----------
-------- -
--------------
--------------------------------------
--
------------- -
-------------
--
---------- --------------
--
------ ----- --------- - -效果如下所示：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554b981e8991b448d1f06