前言
在工程化的开发环境中，前端项目大多采用模块化开发的方式，通过 npm 包管理工具下载第三方库，在代码中引入相关组件实现某个功能。但是随之而来的问题是，在界面复杂的情况下，这些第三方库可能会导致初始化时间变长，从而影响页面的用户体验。
针对这个问题，早期的解决方案是采用异步加载的方式，只有当需要使用某个组件时，才进行加载和初始化。而 ngx-deferred-loader 可以更好地实现这个需求，使得项目用户体验更加友好。
描述
ngx-deferred-loader 是一个 Angular 应用程序中的服务，用于异步延迟加载模块，实现模块的懒加载。
使用 ngx-deferred-loader 可以实现：
- 对于单个组件（模块），分块加载，在需要时执行初始化
- 多个组件同时加载，互不影响
安装
首先，我们需要添加 ngx-deferred-loader 到项目中：
--- ------- -------------------
配置
接下来，我们需要在 app.module.ts 文件中导入和注册 DeferredModule：
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ---------------- - ---- -----------------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- ----------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
-----------------
-------------- ---- --------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用
考虑到实际需求中，每个页面的组件（模块）加载情况不同，我们需要在每个组件（模块）的 ts 文件中导入和使用 ngx-deferred-loader：
------ - --------- - ---- ----------------
------ - --------------------- - ---- ----------------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- -
------------------- ---------------------- ---------------------- --
------ -------- -
----------------------------------------------------- ---------------
-
-在 HTML 文件中，我们需要在需要延迟加载的组件所在的区域添加一个指令:
------------- --------------- ---- ------- ------------------
其中，ng-container 是 Angular 中的占位组件，不会在页面中生成任何实际的元素，只是在渲染时起到容器作用，方便存放需要延迟加载的组件。
示例
下面是一个示例，我们将使用 ngx-deferred-loader 延迟加载一个 ng2-charts 组件，以更好地理解 ngx-deferred-loader 的使用方法。
首先，我们需要安装并引入 ng2-charts：
--- ------- ----------
然后，我们需要在 app.module.ts 文件中导入和注册 ChartsModule：
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ---------------- - ---- -----------------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- ----------------------
------ - ------------ - ---- ------------- ---- ------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
-----------------
---------------
------------ ---- ------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -接下来，在 app.component.ts 中导入和使用 ngx-deferred-loader：
------ - --------- - ---- ----------------
------ - --------------------- - ---- ----------------------
------------
--------- -----------
--------- -
--------- -------------------------
------------- -----------
------- ---------
--------------------------
--------------------------
----------------------------
--------------------------
----------------------------
---------
---------------
------- ----------------------- -------------
--
---------- -----------------------
--
------ ----- ------------ -
------ ------------------------ - -
------ ---- --- --- --- --- --- ---- ------ ------- ----
------ ---- --- --- --- --- --- ---- ------ ------- ---
--
------ -------------------------- - ----------- ----------- -------- -------- ------ ------- --------
------ ----------------- --- - -
----------- ----
--
------ --------------- - -----
------ ------------- - -------
------------------- ---------------------- ---------------------- --
------ -------- -
---------------------------------------------- ---- ---------- --
-
-注意到这里的组件加载路径是 'ng2-charts'，而不是真实的组件文件路径。这是因为 ngx-deferred-loader 已经对 ng2-charts 这个第三方库进行了封装，我们只需要指定库名即可。
最后，我们需要添加一些样式到 app.component.css 中：
----------- - -------- ---- ------- ----- --------------- ----- -
上述代码使用指针事件 none，禁用了组件内部的所有事件。
最后，在浏览器中运行 ng serve 命令，即可查看示例效果。
总结
ngx-deferred-loader 可以按需加载模块，增强 Angular 应用程序的可维护性和性能。通过 ngx-deferred-loader 可以实现单页应用的分块加载，加快页面的加载速度，提高用户体验。本文介绍了使用 ngx-deferred-loader 的基本方法和示例，供读者参考。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5351ab1864dac66923