如何使用ng-idle检测用户活跃状态并重置定时器

核心可用事件 #

ng-idle 内置了两个和用户活跃相关的事件，可根据你的需求选择：

• Idle.onInterrupt：所有用户活跃操作触发，只要检测到你配置范围内的用户行为（鼠标点击、键盘输入、滚动等）就会触发，不管当前是否进入非活跃倒计时，完全匹配你「捕获每一次用户活跃时刻重置自定义定时器」的需求。
• Idle.onActive：仅从非活跃切换到活跃时触发，适合只需要监听用户从长时间无操作回到操作状态的场景。

实现代码示例 #

在你注入了 Idle 服务的组件/公共服务中，直接订阅对应事件即可：

import { Idle } from '@ng-idle/core';
import { Keepalive } from '@ng-idle/keepalive';

constructor(private idle: Idle, private keepalive: Keepalive) {
  // 你的原有ng-idle基础配置（根据自身业务调整参数）
  this.idle.setIdle(300); // 配置300秒无操作进入非活跃倒计时
  this.idle.setTimeout(60); // 进入非活跃后60秒判定为超时
  this.idle.watch(); // 启动ng-idle监听

  // 订阅用户活跃事件，重置你的自定义定时器
  this.idle.onInterrupt.subscribe(() => {
    // 此处写你自己的定时器重置逻辑即可
    console.log('检测到用户操作，已重置定时器');
    // 示例：this.myCustomTimer.reset();
  });

  // 如需仅监听非活跃切回活跃的场景，订阅这个事件即可
  // this.idle.onActive.subscribe(() => {
  //   console.log('用户从非活跃状态回到活跃');
  // });
}

补充说明 #

如果你需要自定义监听的用户操作类型，可以通过 idle.setInterrupts() 方法传入要监听的DOM事件列表，比如新增触摸事件、特定元素的点击事件等。
onInterrupt 触发时ng-idle会自动重置自身的非活跃倒计时，你无需额外调用方法重置ng-idle的状态。

内容的提问来源于stack exchange，提问作者banana