在前端开发中，我们经常需要加载各种资源，例如图片、字体、样式表等。而这些资源的加载往往都是异步的，这就导致了一个问题：如何在加载完成前显示一个 loading 动画，以给用户一个良好的体验？
答案是使用 ngx-automatic-loading，它是一个 Angular 的 npm 包，可以自动为异步加载的资源添加 loading 动画。
安装
首先，我们需要将 ngx-automatic-loading 安装到我们的项目中。可以通过以下命令来实现：
npm install ngx-automatic-loading --save
使用
接下来，就可以开始使用 ngx-automatic-loading 了。
首先，在 app.module.ts 文件中引入 NgxAutomaticLoadingModule 模块：
-- -------------------- ---- -------
------ - ------------------------- - ---- ------------------------
-----------
-------- -
-------------------------
--
---
--
------ ----- --------- - -然后，在需要加载动画的标签上添加 loadingDirectives 指令即可。例如，如果我们需要在加载图片时显示一个 loading 动画，我们可以这样写：
<img src="./assets/image.png" loadingDirectives>
这样，在图片加载完毕前，会出现一个默认的 loading 动画。
配置
ngx-automatic-loading 提供了一些配置选项，可以根据实际需求进行个性化配置。例如，我们可以通过修改 defaultOptions 对象来修改默认选项：
-- -------------------- ---- -------
------ - -------------------------- ----------------------- - ---- ------------------------
----- -------------- ----------------------- - -
--------- ----------- -- -- --- --------
------------- ------------------- -- -- ------- -----
------ --- -- ---- ------- --
--
-----------
-------- -
------------------------------------------------
--
---
--
------ ----- --------- - -示例
以下是一个简单的示例，展示了 ngx-automatic-loading 的使用方法：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------------- - ---- ------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -<img src="https://avatars.githubusercontent.com/u/20509979?v=4" loadingDirectives>
指导意义
ngx-automatic-loading 为我们提供了一个简单、方便、灵活的解决方案，可以让我们轻松地添加加载动画效果，提升用户体验。
另外，通过学习 ngx-automatic-loading 的源代码，我们可以深入了解 Angular 的指令、生命周期等相关知识，加深对框架的理解。
总结
ngx-automatic-loading 是一个非常实用的前端工具库，它可以帮助我们快速添加 loading 动画效果，提升用户体验。在实际项目中，我们可以根据个性化需求进行配置，更好地满足业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d8281e8991b448db3e7