简介
前端开发人员常常需要在网站或应用加载时展示等待动画或者加载状态。ng2ds-preloader 就是一个可以协助完成这一任务的 npm 包。其支持在 Angular 2+ 项目中使用，并且提供了各种自定义选项以适应不同需求。
安装
使用该包之前，我们需要在项目中安装和加载它。
--- ------- --------------- ----------
在您的项目组件模块中加载 ng2ds-preloader：
------ - -------------------- - ---- ------------------ ----------- -------- - -------------------- -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
这样，我们就完成了 ng2ds-preloader 的安装和启用。在接下来的章节里，我们将了解如何在项目中使用该包来实现等待动画和加载状态的功能。
使用指南
使用 ng2ds-preloader 需要借助 Angular 框架提供的 Component 和 Service 机制。我们将创建一个组件来调用 Ng2DsPreloaderService 来控制等待动画和加载状态。
建立等待动画
创建一个装载等待动画的组件：
------ - --------- - ---- ----------------
------ - --------------------- - ---- ------------------
------------
--------- ---------
--------- ----------------------
--
------ ----- ------------ -
----------------------------- ---------------------- -
--------------------------------- -- ------
-
-
隐藏等待动画
------ - --------- - ---- ----------------
------ - --------------------- - ---- ------------------
------------
--------- ---------
--------- ----------------------
--
------ ----- ------------ -
----------------------------- ---------------------- -
--------------------------------- -- ------
-
-更多设置
例如，你希望等待动画在特定时间周期后自动关闭：
------ - --------- - ---- ----------------
------ - --------------------- - ---- ------------------
------------
--------- ---------
--------- ----------------------
--
------ ----- ------------ -
----------------------------- ---------------------- -
--------------------------------- -- ------
------------- -- -
--------------------------------- -- - -- -------
-- ------
-
-
高级设置
ng2ds-preloader 提供了更多的选项，例如在显示等待动画之前预加载资源，或者处理并发等待动画请求。
------ - --------- - ---- ----------------
------ - --------------------- - ---- ------------------
------------
--------- ---------
--------- ----------------------
--
------ ----- ------------ -
----------------------------- ---------------------- -
--------------------------------
------- ------------------- ------------------ -- -----
----- -------- -- ----
---------- ------- -- -----
------ ------- -- --
--------- ------- -- ----
-------- -------- -- ----
-------- ---- -- ----
------------ - -- ---------
---
-
-总结
在前端开发中，处理等待动画和加载状态是非常必要的。 ng2ds-preloader 是一个方便易用的 npm 包，支持 Angular 2+ 项目。它提供了各种自定义选项以适应不同需求。希望这篇文章能够帮助大家理解如何使用 ng2ds-preloader。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005581f81e8991b448d54b5