npm 包 ng4-loading-overlay 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

现在的 Web 应用需要更快的浏览体验，而异步加载和异步渲染是实现这种体验的关键。然而，在所有的请求和响应中，用户只会关心内容是否正在加载。为此，前端工程师需要学会使用一些工具来实现页面显示加载过程。

在 Angular 开发中，ng4-loading-overlay 是一个可以展示页面加载中状态的好工具。本文将详细介绍如何使用 ng4-loading-overlay 这个 npm 包，以及如何在 Angular 应用中将其添加到项目中。

ng4-loading-overlay 简介

ng4-loading-overlay 是一个基于 Angular2+ 的 npm 包，可以在应用程序中展示出 loading 状态。它会在你的应用程序加载资源时添加一个遮罩，就像你常常在许多网站中看到的那样。组件可以自定义界面元素，比如加载指示器、文本等。ng4-loading-overlay 还支持在加载时触发特定事件和钩子。

此外，ng4-loading-overlay 包含如下功能：

  • 支持全局配置和随时可用的实例
  • 支持使用 Provider 进行全局设置

安装 ng4-loading-overlay

首先，在终端中运行以下命令来使用 ng4-loading-overlay:

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

接下来，通过 Angular CLI 创建一个新应用程序，并在根模块中导入并添加 Ng4LoadingSpinnerModule:

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

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

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

在这个例子中，我们通过调用 forRoot() 方法来添加 ng4-loading-overlay 到应用程序。

文字说明

ng4-loading-overlay 很容易使用，只需要跟随以下步骤：

  1. 在应用程序中开启一个遮罩
  2. 加载应用程序所需的内容
  3. 移除遮罩

遮罩会覆盖整个应用程序并阻止用户在加载过程中进行任何操作。然而，可以按照用户自定义进行配置，以使其更适应你的项目。

创建实例

接下来，你需要在组件控制器中添加 ng4-loading-overlay 实例。你可以按照自己的需求声明一个变量，并且注入 Ng4LoadingSpinnerService 来使用：

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

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

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

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

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

在调用show()方法后，loading-overlay 将会在应用程序上添加一个遮罩。在调用hide()方法后，loading-overlay 将会在应用程序上移除这个遮罩。

配置

你可以设置 ng4-loading-overlay 的全局配置。具体可以设置的参数包括：

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

你可以在根模块中使用forRoot()方法来设置全局配置：

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

或者在单个实例中进行配置：

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

高级特性-自定义遮罩

ng4-loading-overlay 提供了定制遮罩的方法，以适应更多的场景。你可以使用CustomNg4LoadingSpinnerComponent和Ng4LoadingSpinnerService来创建和控制一个自定义遮罩页面。使用者可以自由定义背景和加载指示器。

以下是使用自定义组件的示例：

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

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

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

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

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

自定义的组件可以像以下这样进行定义：

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

示例代码

下面是一个完整的示例，使用ng4-loading-overlay在异步加载和异步渲染过程中添加一个加载遮罩层：

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

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

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

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

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

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

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

在上述示例中，每当一个 HTTP 请求进行时，show()方法将会展示遮罩层，而在 HTTP 请求结束时，hide()方法将会隐藏遮罩层。

总的来说，ng4-loading-overlay 很容易使用，并且可以在开发过程中使用，为用户提供更好的体验。而这个配置也是非常简单的，只需要花费很小的精力即可调整。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562dc81e8991b448e046c

阅读全文

猜你喜欢

  • npm 包 koa-express-router 使用教程

    在现代前端开发中，使用前端框架和库是一种很常见的做法。但是一个好的前端项目不仅需要使用前端代码库，还需要与后端代码库良好地进行配合。在这种情况下，使用 koa 或者 express 这种后端框架变得越...

    3 年前
  • npm 包 @vadzim/callback-to-iterator 使用教程

    介绍 在前端的开发过程中，我们经常会使用一些异步的 API，这些 API 往往采用回调函数的方式来通知操作完成。但是回调函数的嵌套容易导致代码难以维护，而 @vadzim/callback-to-it...

    3 年前
  • npm 包 @lahautesociete/styledown 使用教程

    简介 在前端开发中，我们会遇到需要编写文档的情况，其中包括样式库的文档。而最近出现的一个 npm 包 @lahautesociete/styledown 可以帮助我们自动生成样式库的文档，大大提高了开...

    3 年前
  • npm 包 michelson-ext 使用教程

    在前端开发中，我们经常会使用不同的工具和技术来帮助我们更高效地完成开发任务。其中，npm 是一个非常重要的工具，它可以让我们轻松地管理和使用各种插件和包。而 michelson-ext 则是一个非常有...

    3 年前
  • Angular-demo-learning-project 使用教程

    Angular-demo-learning-project 是一个适用于 Angular 前端框架的 npm 包，它可以帮助开发人员在学习和实践 Angular 项目时提供方便和启示。

    3 年前
  • NPM 包 unitedcorecore-build 使用教程

    在前端开发中，随着项目越来越复杂，我们需要用到各种工具来提高开发效率。其中，NPM 包是前端开发中必不可少的一部分，它可以帮助我们快速地完成项目搭建、模块管理、代码优化等任务。

    3 年前
  • npm 包 img-middle-responsive 使用教程

    在 web 开发中，经常需要在页面中插入图片。但是，插入图片时需要考虑图片的布局，尤其是在响应式设计中，图片需要根据屏幕尺寸自适应调整大小。针对这个问题，我们可以使用 npm 包 img-middle...

    3 年前
  • npm包generator-elitecareer-api使用教程

    npm（Node Package Manager）是一个在前端领域越来越受欢迎的包管理工具。它可以让开发者轻松地安装、管理和发布包（package）。其中，generator-elitecareer-...

    3 年前
  • npm 包 react-native-compress-image 使用教程

    介绍 在前端开发中，图片压缩是一个非常重要的问题。为了节省带宽和提高页面加载速度，我们需要将图片进行压缩处理。而在 React Native 中，我们可以使用一个名为 react-native-com...

    3 年前
  • npm 包 react-router-hashlink 使用教程

    简介 react-router-hashlink 是一款用于 React 应用中处理页面跳转与锚点定位的 npm 包。它可以帮助我们在使用 React 路由时，方便快捷地实现页面跳转，并支持锚点定位。

    3 年前
  • npm 包 package-publish-01 使用教程

    什么是 npm 包？ NPM 既是一个 JavaScript 包管理器，也是一个全球最大的包注册表。npm 使开发者可以轻松地共享和重用代码，从而加速了 JavaScript 应用程序的开发。

    3 年前
  • npm 包 get-urls-to-array 使用教程

    在前端开发中，我们经常需要从文本中提取URL链接，这时我们可以使用npm包get-urls-to-array。该包可以将字符串中的所有URL地址提取出来，并以数组形式返回。

    3 年前
  • npm 包 rollup-plugin-stylus-plus 使用教程

    简介 rollup-plugin-stylus-plus 是一个用于 Rollup 构建工具中的 stylus 插件，它可以将 stylus 文件快速转换为 css 文件，并集成了多种有用的功能，比如...

    3 年前
  • npm 包 tiny-merge-patch 使用教程

    前言 在现代的前端开发中，使用 npm 包帮助我们快速构建应用已是司空见惯的事情。不过，在使用 npm 包的过程中，有时候我们需要对已有的数据进行增删改，而这时候就需要使用到一些工具来帮助我们完成数据...

    3 年前
  • npm 包 winston-psq-bulk 使用教程

    简介 在前端开发中，我们会经常使用日志来进行调试和故障排查。但是当日志量非常大时，直接在文件中输出日志可能会导致性能问题，而且不便于管理日志，这时我们可以使用 npm 包 winston-psq-bu...

    3 年前
  • npm 包 react-enterprise-components 使用教程

    在前端开发中，组件化是一种重要的开发方式。在 React 中，我们可以通过使用 npm 包来快速构建复杂 UI 组件，提高开发效率。而 react-enterprise-components 就是一个...

    3 年前
  • npm 包 react-native-searchbar-kesepara 使用教程

    介绍 React Native 是 Facebook 推出的一款基于 JavaScript 的开发框架，可以使用 JavaScript 和 React 编写原生应用程序。

    3 年前
  • npm 包 @wizardsoftheweb/npm-lifecycle-stages 使用教程

    介绍 在前端开发过程中，npm 的使用是必不可少的，npm 能够帮助我们更好的管理和维护项目。在使用 npm 进行前端项目的开发时，我们常常需要涉及到一些自定义脚本来处理特定的逻辑，比如编译、打包、部...

    3 年前
  • npm 包 passport-facebook-signedrequest 使用教程

    在开发 Web 应用时，我们经常需要使用第三方登陆，其中 Facebook 登陆是不可或缺的一种方式。passport-facebook-signedrequest 是一个用于通过 signed_re...

    3 年前
  • npm 包 redux-declare 使用教程

    redux-declare 是一个帮助前端开发者更加方便地使用 Redux 的工具库。它能够在 Redux 上抽象出更高层次的语言，以便让开发者能够更加关注业务逻辑，而不是过度关注 Redux 的 A...

    3 年前

相关推荐

    暂无文章