Angular 5，如何检测用户不活动 [英] Angular 5, how to detect user inactivity

问题描述

除了使用IdleJS和ngDoCheck()之外，我们如何检测Angular 5中的用户非活动状态?

谢谢

Aside from using IdleJS and ngDoCheck(), how can we detect user inactivity in Angular 5?

Thanks

推荐答案

您可以尝试以下方法:

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秒钟:您会看到消息.

Seems to work in this stackblitz : open the console, don't move your mouse for 3 seconds : you see the message.

刷新页面，在预览(右侧)上移动鼠标几秒钟:直到停止3秒钟，消息才会弹出.

Refresh the page, move your mouse on the preview (right side) for a couple of seconds : the message doesn't pop until you stop for 3s.

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

You can obviously export that into a service, because as you can see, I'm using only a class to do that.

这篇关于Angular 5，如何检测用户不活动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！