Question

我需要在我的应用程序中实现超时，如果页面上没有用户活动，我会将用户重定向到首页，这意味着当事件之一（例如单击或鼠标悬停）触发时，我需要在某些时候打破空闲状态。

出于这个目的，我选择使用ng-idle。我的应用程序包含许多页面，我希望所有页面都发生超时，因此我在页面组件中插入了用户空闲代码，该代码由其他组件扩展。在我的应用程序中，我具有rout.module.ts文件，该文件定义了所有页面的路由顺序。问题在于onIdleEnd仅适用于路由中的第一页，在所有其他页面中，onTimeout开始递减计数，但不会在我定义的事件上停止。在第一页上，它工作正常，然后停止并重置。

这是页面组件中构造函数的代码：

构造函数（

private idle: Idle, 
private keepalive: Keepalive,
private stateDataService: AppStateDataService,
private dbService: InMemoryDbManagerService,
private router?: Router

）{

 idle.setIdle(5);
 idle.setTimeout(5);
 scrolls, touches to the document
 idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); 
 idle.onIdleEnd.subscribe(() => {this.idleState = 'No longer  idle.',console.log("onIdleEnd")});
 idle.onTimeout.subscribe(() => {
   this.idleState = 'Timed out!';
   this.timedOut = true;
   this.router.navigate(['/']);
   console.log("onTimeout")
 });
 idle.onIdleStart.subscribe(() => {this.idleState = 'You\'ve gone idle!',console.log("onIdleStart")});
 idle.onTimeoutWarning.subscribe((countdown) => {this.idleState = 'You will time out in ' + countdown + ' seconds!',console.log(countdown)});
    keepalive.interval(15);

 keepalive.onPing.subscribe(() => this.lastPing = new Date());

}

reset（）{

this.idle.watch();
this.idleState = 'Started.';
this.timedOut = false;

}

ngOnInit（）{

this.reset();

}

在尝试添加

ngOnInit（）{

this.reset();

} 在每个组件中，而不是仅在页面组件中添加，它都无法正常工作。我做错了什么？谢谢。

如何在路由中使用onIdleEnd？

0 个答案: