npm 包 ng2ds-preloader 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

前端开发人员常常需要在网站或应用加载时展示等待动画或者加载状态。ng2ds-preloader 就是一个可以协助完成这一任务的 npm 包。其支持在 Angular 2+ 项目中使用，并且提供了各种自定义选项以适应不同需求。

安装

使用该包之前，我们需要在项目中安装和加载它。

npm install ng2ds-preloader --save-dev

在您的项目组件模块中加载 ng2ds-preloader：

import { Ng2DsPreloaderModule } from 'ng2ds-preloader';

@NgModule({
  imports: [ Ng2DsPreloaderModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

这样，我们就完成了 ng2ds-preloader 的安装和启用。在接下来的章节里，我们将了解如何在项目中使用该包来实现等待动画和加载状态的功能。

使用指南

使用 ng2ds-preloader 需要借助 Angular 框架提供的 Component 和 Service 机制。我们将创建一个组件来调用 Ng2DsPreloaderService 来控制等待动画和加载状态。

建立等待动画

创建一个装载等待动画的组件：

-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- - ---- ------------------

------------
  --------- ---------
  --------- ----------------------
--
------ ----- ------------ -
  ----------------------------- ---------------------- -
    --------------------------------- -- ------
  -
-

隐藏等待动画

-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- - ---- ------------------

------------
  --------- ---------
  --------- ----------------------
--
------ ----- ------------ -
  ----------------------------- ---------------------- -
    --------------------------------- -- ------
  -
-

高级设置

ng2ds-preloader 提供了更多的选项，例如在显示等待动画之前预加载资源，或者处理并发等待动画请求。

-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- - ---- ------------------

------------
  --------- ---------
  --------- ----------------------
--
------ ----- ------------ -
  ----------------------------- ---------------------- -
    --------------------------------
        -------- ------------------- ------------------ -- -----
        ------ -------- -- ----
        ----------- ------- -- -----
        ------- ------- -- --
        ---------- ------- -- ----
        --------- -------- -- ----
        --------- ---- -- ----
            ------------ - -- ---------
    ---
  -
-

总结

在前端开发中，处理等待动画和加载状态是非常必要的。 ng2ds-preloader 是一个方便易用的 npm 包，支持 Angular 2+ 项目。它提供了各种自定义选项以适应不同需求。希望这篇文章能够帮助大家理解如何使用 ng2ds-preloader。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005581f81e8991b448d54b5

npm 包 ng2ds-preloader 使用教程

简介

安装

使用指南

建立等待动画

隐藏等待动画

更多设置

高级设置

总结

纠错反馈