使用 Cordova 和 Ionic 的 Typescript 中的不活动检查器？

Question

我看过 npm 包 ng-idle，但它不适用于 ionic 移动应用程序。我找到了这个 JavaScript 代码并对其进行了一些更改以适合我的项目，但我收到错误 this.router is undefined.

var timeoutID : any;

constructor(public router: Router ){

    //Checks for inactivity constantly
    this.setupInactivityChecker();
}

startTimer() {
    timeoutID = window.setTimeout(this.goInactive, 5000);
  }
  
  resetTimer() {
      window.clearTimeout(timeoutID);
      this.goActive();
  }
  
  goInactive() {
      // do something
       console.log('Ahhhh.. finally inactive again. Now I may rest -_-');
       this.router.navigate(['login-screen']);
  }
  
  goActive() {
      // do something
      console.log('Active again');
      this.startTimer();
  }
  
  setupInactivityChecker() {
    addEventListener("mousemove", this.resetTimer(), true);
    addEventListener("mousedown", this.resetTimer(), true);
    addEventListener("keypress", this.resetTimer(), true);
    addEventListener("DOMMouseScroll", this.resetTimer(), true);
    addEventListener("mousewheel", this.resetTimer(), true);
    addEventListener("touchmove", this.resetTimer(), true);
    addEventListener("MSPointerMove", this.resetTimer(), true);
  
    this.startTimer();
  }

另外附注：谁能解释为什么我不能在处理程序中使用括号？喜欢：

timeoutID = window.setTimeout(this.goInactive, 5000);

我只希望应用程序在闲置一段时间后注销，因此任何链接都将不胜感激。

好的，这是可以正常工作的版本。

    let outsideRouter : any;
    var timeoutID : any;
    
    export class ScannerLogicService {

    constructor(private network: Network, private router: Router,public barcode: BarcodeScanner, public alertController: AlertController, private http: HttpClient, private dialog: Dialogs) {

        outsideRouter = router;
        setupInactivityChecker();

    }
    }

function startTimer() {
  timeoutID = window.setTimeout(goInactive, 1800000);
}

function resetTimer() {
    window.clearTimeout(timeoutID);
    goActive();
}

function goInactive() {
     console.log('Ahhhh.. finally inactive again. Now I may rest -_-');
     outsideRouter.navigate(['login']);
}

function goActive() {
    console.log('Active again');
    startTimer();
}

function setupInactivityChecker() {
  addEventListener("mousemove", resetTimer, true);
  addEventListener("mousedown", resetTimer, true);
  addEventListener("keypress", resetTimer, true);
  addEventListener("DOMMouseScroll", resetTimer, true);
  addEventListener("mousewheel", resetTimer, true);
  addEventListener("touchmove", resetTimer, true);
  addEventListener("MSPointerMove", resetTimer, true);

  startTimer();
}

请注意，我的函数是在我的服务 class 之外调用的

Answer 1

对于 Ionic Angular，使用 @HostListener 是实现您想要实现的目标的最佳方式：

@HostListener('mousemove', ['$event'])
@HostListener('mousedown', ['$event'])
onEvent(event) {
    this.resetTimer();
}

然后在您的 constructor 或 ngOnInit() 中您可以调用 this.startTime().

对于检查不活动的用例，您可以在 app.component.ts 文件中编写此代码，该文件将侦听 AppComponent 及其子组件中的所有指定事件，这对于常规 Angular 或 Ionic 应用程序，将是整个应用程序。

您可以在此处了解有关 @HostListener 的更多信息：https://dzone.com/articles/what-are-hostbinding-and-hostlistener-in-angular

使用 Cordova 和 Ionic 的 Typescript 中的不活动检查器？

Inactivity Checker in Typescript using Cordova and Ionic?

cordova

typescript

ionic-framework