Как реализовать простой в angular с использованием собственного JS кода? - PullRequest
Новая
       24

Как реализовать простой в angular с использованием собственного JS кода?

1 голос
/ 27 марта 2020

Я должен определить время простоя пользователя в моем приложении. Мое приложение использует как родной javascript, так и angular. на моей странице HTML + JavaScript я реализовал ниже: 

<script>
var inactivityTime = function () {
    var time;
    document.onmousemove = resetTimer;
    document.onkeypress = resetTimer;
    document.onclick = resetTimer;
    document.onwheel = resetTimer;

    function callApi() {
        alert("Idle for 3 seconds. You can call your api here");
    }

    function resetTimer() {
        clearTimeout(time);
        time = setTimeout(callApi, 3000); 
        // 5 minute = 60000 * 5;
        // 1000 milliseconds = 1 second
    }
};

window.onload = function() {
  inactivityTime(); 
}
</script>

и он работает, как и ожидалось.

, тогда как то же самое я использую в проекте angular, angular код также работает, но обнаружена 1 небольшая проблема, сначала посмотрите мой angular код: 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'project';
  time;

  ngOnInit() {  
    this.inactivityTime();  
    this.resetTimer();
  }

  inactivityTime() {
    document.onmousemove = this.resetTimer;
    document.onkeypress = this.resetTimer;
    document.onclick = this.resetTimer;
    document.onwheel = this.resetTimer;

  }

  resetTimer() {
    clearTimeout(this.time);
    this.time = setTimeout(() => {
      alert('Idle for 3 seconds. You can call your api here');
    }, 3000);
  }
}

проблема, с которой я сталкиваюсь - при загрузке страницы, даже если я выполняю движение мыши / нажатие клавиши, предупреждение вызывается. после этого все работает как положено. Но при загрузке страницы это не работает.

Запрос помощи здесь.

спасибо!

Ответы [ 2 ]

1 голос
/ 27 марта 2020

Лучший подход - использовать Angular HostListener decorator и привязать его к документу: 

export class AppComponent {
  time: number;

  ngOnInit() {  
    this.resetTimer();
  }

  @HostListener('document:mousemove')
  @HostListener('document:keypress')
  @HostListener('document:click')
  @HostListener('document:wheel')
  resetTimer() {
    clearTimeout(this.time);
    this.time = setTimeout(() => {
      alert('Idle for 3 seconds. You can call your api here');
    }, 3000);
  }
}

Вот решение в stackblitz

0 голосов
/ 27 марта 2020

Самый простой вариант - использовать angular -user-idle .

https://www.npmjs.com/package/angular-user-idle

Включить это в приложение. module.ts: import: [.. .. UserIdleModule.for Root ({idle: 3, время ожидания: 0, ping: 0})]

app.component.ts 

ngOnInit() {  
    this.userIdle.startWatching();
    this.userIdle.onTimerStart().subscribe(count =>{
      console.log(count);
      if(count == 3){
        alert('Idle for 3 seconds. You can call your api here');
        this.userIdle.resetTimer();
      }
    });
  }

  @HostListener('document:keyup', [])
  @HostListener('document:click', [])
  @HostListener('document:wheel', [])
  @HostListener('document:mousemove', [])
  restart() :void{
    this.userIdle.resetTimer();
  }
...