如何在ionic2和angular2中观察空闲

Question

我想看看空闲的输入框，鼠标事件和整个页面..如果空闲5分钟，我想做自动注销并使用ionic2进入初始登录页面我的ionic2信息是

global packages:

@ionic/cli-utils : 1.2.0
Cordova CLI      : 7.0.1
Ionic CLI        : 3.2.0

本地包裹：

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.3.0
@ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms               : android 6.2.3
Ionic Framework                 : ionic-angular 3.2.1

系统：

Node       : v6.10.3
OS         : Windows 10
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed

Answer 1

首先安装打字稿，npm install -g [email protected] 第二次安装ng-idle npm install --save @ ng-idle / core @ ng-idle / keepalive angular2-moment 在app.module.ts中导入ng-idle 从'@ ng-idle / keepalive'导入{NgIdleKeepaliveModule};

imports: [
NgIdleKeepaliveModule,
IonicModule.forRoot(MyApp)  ],

在您想要使用的typescript文件中声明idle。 e.g：home.ts

import { NgIdleKeepaliveModule } from '@ng-idle/keepalive';
export class HomePage {

idleState = 'Not started.';
timedOut = false;
min:any;
sec;any;
constructor(public navCtrl: NavController,private barcodeScanner: BarcodeScanner,public idle: Idle) { }


 ionViewDidLoad() {
this.idle.setIdle(5);  //after 5 sec idle
this.idle.setTimeout(5*60);  //5min countdown
this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

this.idle.onIdleEnd.subscribe(() => this.idleState = 'No longer idle.');
this.idle.onTimeout.subscribe(() => {
  this.idleState = 'Timed out!';
  this.timedOut = true;
  this.navCtrl.pop();  //go to logout page after 5 min idle.
});
this.idle.onIdleStart.subscribe(() => this.idleState = 'You\'ve gone idle!');
this.idle.onTimeoutWarning.subscribe((countdown) => {


    var data=countdown/60;
    this.min=data.toString().split('.')[0];
    this.sec=     parseFloat(0+'.'+data.toString().split('.')[1])*60;
    this.sec=  (Math.round(this.sec * 100) / 100);
    console.log(countdown)

  this.idleState = 'You'll logout in ' + this.min+' min ' +this.sec+'  seconds!';
});
   this.reload();
  }
  reload() {
    this.idle.watch();
    this.idleState = 'Started.';
    this.timedOut = false;
  }
}

在home.html

 <p><strong>{{idleState}}</strong></p>
<button (click)="reset()" *ngIf="timedOut">Reload</button>

它可以计算到5分钟。

Answer 2

如果您使用angular <v.6，请使用

npm install --save @ng-idle/[email protected]
npm install --save @ng-idle/[email protected]

如果您使用角度v.6，请使用

npm install --save @ng-idle/core
npm install --save @ng-idle/keepalive