typescript 不活动后 Angular 4 重定向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50579279/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4 redirect after inactivity
提问by Mex
I need to make a timeout whenever you are inactive on a page. Lets say you are 20 seconds on a page without clicking something it will redirect you to the home screen.
每当您在页面上处于非活动状态时，我都需要超时。假设您在一个页面上停留了 20 秒而没有点击任何东西，它会将您重定向到主屏幕。
The current code does not work for inactivity and i dont know how to make it work.
当前代码不适用于不活动，我不知道如何使其工作。
ngOnInit() {
// do init at here for current route.
setTimeout((router: Router) => {
this.router.navigate(['nextRoute']);
}, 20000); //20s
}
}
回答by J. S.
You need a timer which counts backwards and gets resetted when user action comes up. To track user action you can use a host listener:
您需要一个倒计时并在用户操作出现时重置的计时器。要跟踪用户操作，您可以使用主机侦听器：
@HostListener('document:keyup', ['$event'])
@HostListener('document:click', ['$event'])
@HostListener('document:wheel', ['$event'])
resetTimer () {
// user action occured
}
And a timer would be something like this:
一个计时器将是这样的：
endCount = new Subject();
// end time in minutes
private initTimer (endTime: number) {
const interval = 1000;
const duration = endTime * 60;
this.subscription = Observable.timer(0, interval)
.take(duration)
.subscribe(value => this.render((duration - +value) * interval),
err => { },
() => {
this.endCount.next();
});
}
private render (count) {
this.secondsDisplay = this.getSeconds(count);
this.minutesDisplay = this.getMinutes(count);
}
private getSeconds (ticks: number) {
const seconds = ((ticks % 60000) / 1000).toFixed(0);
return this.pad(seconds);
}
private getMinutes (ticks: number) {
const minutes = Math.floor(ticks / 60000);
return this.pad(minutes);
}
private pad (digit: any) {
return digit <= 9 ? '0' + digit : digit;
}
Listen on endCount to get notified when user was inactive for a period of time.
侦听 endCount 以在用户一段时间不活动时收到通知。
To reset the timer:
要重置计时器：
resetTimer (newEndTime) {
this.clearTimer();
this.initTimer(newEndTime);
}
clearTimer () {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
Stackblitz Example: https://stackblitz.com/edit/angular-2rv3or
Stackblitz 示例：https://stackblitz.com/edit/angular-2rv3or
回答by Max Martynov
Try NPM module angular-user-idle. It may help don't create your own solutions.
尝试 NPM 模块angular-user-idle。不要创建自己的解决方案可能会有所帮助。
How it will look in your code:
它在您的代码中的外观：
ngOnInit() {
//Start watching for user inactivity.
this.userIdle.startWatching();
// Start watch when time is up.
this.userIdle.onTimeout().subscribe(() => {
this.router.navigate(['nextRoute']);
});
}
回答by Nagendra Pantham
Install Idlejs node module by following cmd
按照 cmd 安装 Idlejs 节点模块
npm install --save idlejs
Import module and add to app.component.ts
导入模块并添加到 app.component.ts
import { Idle } from 'idlejs/dist';
const idle = new Idle()
.whenNotInteractive()
.within(60)
.do(() => console.log('IDLE'))
.start();
