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秒钟，消息才会弹出。

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

Answer 2

这个解决方案对我来说效果很好。我在接受的答案中面临的问题是，它只关注鼠标事件而没有键盘按键事件

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

    constructor( ) {
        
        this.setTimeout();
        this.userInactive.subscribe(() => {
        this.router.navigate(['/auth/lock']);
        });
       
        }

这些事件检查用户是否在特定时间空闲，然后订阅不同的（锁定）屏幕

 keyPress(event: KeyboardEvent): void {
     clearTimeout(this.userActivity);
     this.setTimeout();
 }
 setTimeout(): void {
     this.userActivity = setTimeout(() => this.userInactive.next(undefined), 900000);
 }

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

Answer 3

可能的解决方案是使用此软件包angular-user-idle

我没有在实际应用中使用过它，但是可能比上一个答案中提出的解决方案更健壮。

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

3 个答案: