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

Question

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

谢谢

Answer 1

你可以试试这个:

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();
  }
}

似乎在 this stackblitz 中工作:打开控制台，不要移动鼠标 3 秒:您会看到消息。

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

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