介绍
ng2-keepalive 是一个 Angular (4+) 的 npm 包，帮助我们轻松实现路由不活动自动注销（或返回）功能。该包会监控路由状态是否活跃，若长时间不操作则自动执行注销操作。该功能需求用处非常广泛，比如银行系统、医院门诊等等需要登陆的系统。ng2-keepalive 可以帮助我们简化这部分需求的代码实现。
ng2-keepalive 提供了一些可配置的参数，例如：
- idle: 未操作时间多久后开始注销，单位：秒
- timeout: 在注销前发出的警告时间，单位：秒
- ping: 用来检测服务器是否在线的间隔时间，单位：秒
使用 ng2-keepalive，我们不需要再手工维护 Timer 或者监听鼠标、键盘事件。
先决条件
在开始使用 ng2-keepalive 之前，需要确保已经安装好了 Angular 客户端框架以及最新版本的 RxJS。
安装
可以通过 npm 或 yarn 进行安装，运行以下命令：
npm install ng2-keepalive --save
或者是
yarn add ng2-keepalive
使用方法
- 在 AppModule 中导入
KeepaliveModule并在 BrowserModule 和 RouterModule 之后初始化。
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - --------- - ---- ----------------
------ - --------------- - ---- ----------------
-----------
------------- ---------------
-------- -
--------------
--------------------------------
--------------------------
--
---------- ---
---------- ---------------
--
------ ----- --------- --- 在 AppComponent 中提供提供
Keepalive和NgIdle。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- ----------------
------ - --------------------- - ---- ---------------------
------------
--------- -----------
--------- ----------------------------------
--
------ ----- ------------ -
------------------- ---------- ---------- ------- ----- ---------------------- -
----------------------- - ---- -- -----------------
--------------------------- - --- -- ---- ------------
-------------------------- -- -------------------------
----------------- - --- -- -----------
-
-- 在需要使用的 Component 中使用
timerStart()、run()和stop()方法。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------- ---------- ------------ ------------------------------------
----- ------ ------
--
--
------ ----- ------------- -
------ ------- -------
------------------- ---------- ---------- --
------ ------------- ---- -
---
- -------- --- -------- -------- ---
- ------- ------------ ---------- -----------
- - ------------------ -------
--
---------------------------------------- -- -
----------- - ----------------------------------
---
-
-示例代码
https://github.com/StevenZWu/ng2-keepalive-example
总结
ng2-keepalive 能够帮助我们简化路由不活动自动注销的代码实现，本文介绍了如何使用 ng2-keepalive ，并提供了示例代码。使用之前请确保对 ng2-keepalive 的配置符合当前业务逻辑，本文不对此进行过多说明。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005553881e8991b448d26ae