npm 包 ng2-keepalive 使用教程

介绍

ng2-keepalive 是一个 Angular (4+) 的 npm 包，帮助我们轻松实现路由不活动自动注销（或返回）功能。该包会监控路由状态是否活跃，若长时间不操作则自动执行注销操作。该功能需求用处非常广泛，比如银行系统、医院门诊等等需要登陆的系统。ng2-keepalive 可以帮助我们简化这部分需求的代码实现。

ng2-keepalive 提供了一些可配置的参数，例如：

  • idle: 未操作时间多久后开始注销，单位：秒
  • timeout: 在注销前发出的警告时间，单位：秒
  • ping: 用来检测服务器是否在线的间隔时间，单位：秒

使用 ng2-keepalive，我们不需要再手工维护 Timer 或者监听鼠标、键盘事件。

先决条件

在开始使用 ng2-keepalive 之前，需要确保已经安装好了 Angular 客户端框架以及最新版本的 RxJS。

安装

可以通过 npm 或 yarn 进行安装，运行以下命令：

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

或者是

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

使用方法

  1. 在 AppModule 中导入 KeepaliveModule 并在 BrowserModule 和 RouterModule 之后初始化。
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - --------- - ---- ----------------
------ - --------------- - ---- ----------------

-----------
  ------------- ---------------
  -------- -
    --------------
    --------------------------------
    --------------------------
  --
  ---------- ---
  ---------- ---------------
--
------ ----- --------- --
  1. 在 AppComponent 中提供提供 Keepalive 和 NgIdle。
------ - --------- - ---- ----------------
------ - --------- - ---- ----------------
------ - --------------------- - ---- ---------------------

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

    ----------------- - --- -- -----------
  -
-
  1. 在需要使用的 Component 中使用 timerStart()、run() 和 stop() 方法。
------ - --------- - ---- ----------------
------ - --------- - ---- ----------------

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

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

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

示例代码

https://github.com/StevenZWu/ng2-keepalive-example

总结

ng2-keepalive 能够帮助我们简化路由不活动自动注销的代码实现，本文介绍了如何使用 ng2-keepalive ，并提供了示例代码。使用之前请确保对 ng2-keepalive 的配置符合当前业务逻辑，本文不对此进行过多说明。

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

阅读全文

猜你喜欢

  • npm 包 set-npm-task 使用教程

    随着前端开发的不断发展，Node.js 的使用越来越广泛，npm 更是成为了前端开发的必备利器。npm 作为世界上最大的软件包管理系统，包含了众多实用的前端插件和工具。

    2 年前
  • npm 包 redux-loop-symbol-ponyfill 使用教程

    概述 redux-loop-symbol-ponyfill 是一个 npm 包，它提供了一个用于在不支持 Symbol 类型的浏览器中使用 redux-loop 的解决方案。

    2 年前
  • NPM包 Leaflet-Clicktolerance 使用教程

    前言 Leaflet-Clicktolerance 是一个可扩展的鼠标单击事件处理程序，它可以将 Leaflet 地图鼠标点击事件的容差设置为任意值。这个包可以让你更方便地在地图上进行鼠标操作，并且为...

    2 年前
  • npm 包 node-multi-storage-azure-blob 使用教程

    简介 node-multi-storage-azure-blob 是一个基于 Node.js 平台的 Azure Blob 存储的多媒体文件存储库，它提供了存储、获取和删除操作的 API。

    2 年前
  • npm 包 Wilkins 的使用教程

    Wilkins 是一个基于 Vue 框架的 npm 包，它可以帮助前端开发人员更轻松地构建可复用的组件和界面样式。本文将介绍 Wilkins 的使用方法，并提供详细的示例代码，帮助初学者快速掌握这个技...

    2 年前
  • npm包grunt-localgov-drupal-project使用教程

    前言 随着时代的发展，前端技术已经日新月异。新技术层出不穷，各自都有自己的优点和适用场景。然而，随着前端技术的发展，项目也越来越复杂，变革也越来越频繁，工程化已经成为前端开发必须掌握的技能之一。

    2 年前
  • npm 包 js-object-util 使用教程

    在前端开发中，JavaScript 对象是极为常见的数据类型。在对对象进行操作时，不可避免会遇到一些问题，如对象的深拷贝、对象属性的复制和合并等等。针对这些问题，我们可以使用第三方库或工具进行解决。

    2 年前
  • npm 包 konstellio 使用教程

    什么是 konstellio？ konstellio 是一款基于 Vue.js 的 UI 组件库，提供了一系列的 UI 组件，包括表格、表单、对话框等等。您可以使用这些组件搭建出漂亮、易用的前端界面。

    2 年前
  • npm 包 react-chartist-plugin-accessibility 使用教程

    概述 react-chartist-plugin-accessibility 是一个用于增强图片图表可访问性的 react 组件插件包。它使用了 Chartist 库来绘制图表，并提供了一些额外的功能...

    2 年前
  • npm 包 aliezpoi 使用教程

    前言 在前端开发过程中，我们常常需要使用各种 npm 包来辅助我们完成项目开发。其中，aliezpoi 是一个轻量级的 JS 工具库，可以帮助我们更方便地操作字符串、数组、日期等各种数据类型。

    2 年前
  • npm 包 lmn-prismic.io 使用教程

    lmn-prismic.io 是一个前端开发工具，可以帮助你快速地获取 Prismic CMS 中的数据并将其用于你的项目中。在本文中，我们将详细介绍 lmn-prismic.io 的使用方法，并提供...

    2 年前
  • npm 包 prime-tables 使用教程

    在前端开发中，经常需要进行数字计算和表格生成任务。其中，质数表格是非常常见的一种计算任务。为了解决这一需求，一个名为 prime-tables 的 npm 包应运而生。

    2 年前
  • npm 包 bige-browser 使用教程

    简介 在前端开发中，我们常常需要获取用户的浏览器信息。bige-browser 是一个轻量级的、用于判断用户所使用的浏览器的 npm 包。本文将介绍该 npm 包的使用方法。

    2 年前
  • npm 包 component-map 使用教程

    在前端开发中，我们经常需要使用各种各样的组件，例如弹窗、轮播、滚动等等。这些组件的实现方式有很多种，但是有时候我们并不希望自己去从头实现它们，而是希望能够直接使用别人已经实现好了的组件。

    2 年前
  • NPM包Compat-db使用教程

    在前端开发中，不同浏览器的兼容性问题经常会遇到。试想一下，在开发过程中经常需要测试不同浏览器在不同操作系统上的表现。而查看所有不同浏览器和操作系统上的兼容性显然是一项繁琐的任务。

    2 年前
  • npm 包 district-cli 使用教程

    在前端开发中，我们经常需要使用命令行工具进行代码的构建和部署等操作。为了方便而高效地完成这一任务，一个名为 district-cli 的 npm 包应运而生。这篇文章就来详细介绍一下这个工具的使用方法...

    2 年前
  • npm 包 cerebro-rebrickable 使用教程

    前言 cerebro-rebrickable 是一个适用于前端开发的 npm 包，它是一个基于 Rebrickable API 封装的方便快捷的工具，用于查询 LEGO 砖块的数据。

    2 年前
  • npm 包 gulp-nunit-console 使用教程

    前言 gulp-nunit-console 是一个用于在 Gulp 构建任务中执行 NUnit 测试的插件。它能够帮助开发者更方便地管理和执行 NUnit 测试，并且可以自定义测试运行的参数和输出方式...

    2 年前
  • npm 包 hyper-unity 使用教程

    介绍 在 Web 前端开发中，使用 npm 包是非常常见的事情。也许你已经使用了一些常见的 npm 包，如 Vue、React、jQuery 等。今天我要介绍的是一个非常有用的 npm 包——hype...

    2 年前
  • npm 包 karma-callphantom-reporter 使用教程

    介绍 在前端开发过程中，我们通常会使用 Karma 这样的测试框架，并利用 PhantomJS 进行测试。但是，PhantomJS 本身并不支持 ES6 语法，这就意味着在测试过程中可能会出现很多兼容...

    2 年前

相关推荐

    暂无文章