时间戳

首页 > 解决方案 > Angular 5，如何检测用户不活动

angular - Angular 5，如何检测用户不活动

问题描述

除了使用 IdleJS 和 ngDoCheck()，我们如何在 Angular 5 中检测用户不活动？

谢谢

标签： angular

解决方案

你可以试试这个：

export class AppComponent {

  userActivity;
  userInactive: Subject<any> = new Subject();

  constructor() {
    this.setTimeout();
    this.userInactive.subscribe(() => console.log('user has been inactive for 3s'));
  }

  setTimeout() {
    this.userActivity = setTimeout(() => this.userInactive.next(undefined), 3000);
  }

  @HostListener('window:mousemove') refreshUserState() {
    clearTimeout(this.userActivity);
    this.setTimeout();
  }
}

似乎在这个 stackblitz中工作：打开控制台，3 秒内不要移动鼠标：你会看到消息。

刷新页面，在预览（右侧）上移动鼠标几秒钟：直到您停止 3 秒，该消息才会弹出。

您显然可以将其导出到服务中，因为如您所见，我只使用一个类来执行此操作。

推荐阅读