角度6 ng-idle

我的根app.component.ts中的代码如下:import { Component } from '@angular/core';import { Idle, DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';import { Keepalive } from '@ng-idle/keepalive';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { idleState = 'Not started.'; timedOut = false; lastPing?: Date = null; constructor(private idle: Idle, private keepalive: Keepalive) { // sets an idle timeout of 5 seconds, for testing purposes. idle.setIdle(5); // sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out. idle.setTimeout(5); // sets the default interrupts, in this case, things like clicks, scrolls, touches to the document idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); idle.onIdleEnd.subscribe(() => this.idleState = 'No longer idle.'); idle.onTimeout.subscribe(() => { this.idleState = 'Timed out!'; this.timedOut = true; }); idle.onIdleStart.subscribe(() => this.idleState = 'You\'ve gone idle!'); idle.onTimeoutWarning.subscribe((countdown) => this.idleState = 'You will time out in ' + countdown + ' seconds!'); // Sets the ping interval to 15 seconds keepalive.interval(15); keepalive.onPing.subscribe(() => this.lastPing = new Date()); this.reset(); } reset() { this.idle.watch(); this.idleState = 'Started.'; this.timedOut = false; }}我知道我需要调用idle.unwatch来防止空闲运行和idle.watch何时需要，但是如何从登录或身份验证模块中调用它们，或者如何从根应用程序进行检测.component.ts?毫无疑问，您可以说我是Angular的新手，如果这是一个菜鸟问题，我们深表歉意.解决方案由于总是有不止一种方式给猫剥皮，所以这是我自己解决这个问题的方法.我希望其他人将来会发现它有用.import { Component } from '@angular/core';import { Location } from '@angular/common';import { Router } from '@angular/router';import { Idle, DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';import { Keepalive } from '@ng-idle/keepalive';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { currentPath: String; idleState = 'Not started.'; timedOut = false; lastPing?: Date = null; constructor(private idle: Idle, private keepalive: Keepalive, location: Location, router: Router) { // sets an idle timeout of 5 seconds, for testing purposes. idle.setIdle(5); // sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out. idle.setTimeout(5); // sets the default interrupts, in this case, things like clicks, scrolls, touches to the document idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); idle.onIdleEnd.subscribe(() => this.idleState = 'No longer idle.'); idle.onTimeout.subscribe(() => { this.idleState = 'Timed out!'; this.timedOut = true; }); idle.onIdleStart.subscribe(() => this.idleState = 'You\'ve gone idle!'); idle.onTimeoutWarning.subscribe((countdown) => this.idleState = 'You will time out in ' + countdown + ' seconds!'); // Sets the ping interval to 15 seconds keepalive.interval(15); keepalive.onPing.subscribe(() => this.lastPing = new Date()); // Lets check the path everytime the route changes, stop or start the idle check as appropriate. router.events.subscribe((val) => { this.currentPath = location.path(); if(this.currentPath.search(/authentication\/login/gi) == -1) idle.watch(); else idle.stop(); }); } reset() { this.idle.watch(); this.idleState = 'Started.'; this.timedOut = false; }}I have an Angular Project which is working well and I'm implementing NG-IDLE and KeepAlive in order to keep the session fresh and to log a user out before the API session expires.My issue is that the ng-idle is also operating on the login page, which is obviously not required, as when it does time out, it will take the person to the login page.So I have the ng-idle and KeepAlive up and running in my app.component.ts but since I'm using lazy loading, I also have an authentication.module.ts and a login.component.ts.The code in my root app.component.ts is as follows:import { Component } from '@angular/core';import { Idle, DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';import { Keepalive } from '@ng-idle/keepalive';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { idleState = 'Not started.'; timedOut = false; lastPing?: Date = null; constructor(private idle: Idle, private keepalive: Keepalive) { // sets an idle timeout of 5 seconds, for testing purposes. idle.setIdle(5); // sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out. idle.setTimeout(5); // sets the default interrupts, in this case, things like clicks, scrolls, touches to the document idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); idle.onIdleEnd.subscribe(() => this.idleState = 'No longer idle.'); idle.onTimeout.subscribe(() => { this.idleState = 'Timed out!'; this.timedOut = true; }); idle.onIdleStart.subscribe(() => this.idleState = 'You\'ve gone idle!'); idle.onTimeoutWarning.subscribe((countdown) => this.idleState = 'You will time out in ' + countdown + ' seconds!'); // Sets the ping interval to 15 seconds keepalive.interval(15); keepalive.onPing.subscribe(() => this.lastPing = new Date()); this.reset(); } reset() { this.idle.watch(); this.idleState = 'Started.'; this.timedOut = false; }}I know I need to call idle.unwatch in order to prevent idle running and idle.watch when I need it to, but how can I either call these from the login or authentication module, or can I detect from the root app.component.ts?As no doubt you can tell that I'm new to Angular, so apologies if this is a rookie question. 解决方案 Since there are always more than one way to skin a cat, here's my own solution to this issue. I hope someone else finds it useful in the future.import { Component } from '@angular/core';import { Location } from '@angular/common';import { Router } from '@angular/router';import { Idle, DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';import { Keepalive } from '@ng-idle/keepalive';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { currentPath: String; idleState = 'Not started.'; timedOut = false; lastPing?: Date = null; constructor(private idle: Idle, private keepalive: Keepalive, location: Location, router: Router) { // sets an idle timeout of 5 seconds, for testing purposes. idle.setIdle(5); // sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out. idle.setTimeout(5); // sets the default interrupts, in this case, things like clicks, scrolls, touches to the document idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); idle.onIdleEnd.subscribe(() => this.idleState = 'No longer idle.'); idle.onTimeout.subscribe(() => { this.idleState = 'Timed out!'; this.timedOut = true; }); idle.onIdleStart.subscribe(() => this.idleState = 'You\'ve gone idle!'); idle.onTimeoutWarning.subscribe((countdown) => this.idleState = 'You will time out in ' + countdown + ' seconds!'); // Sets the ping interval to 15 seconds keepalive.interval(15); keepalive.onPing.subscribe(() => this.lastPing = new Date()); // Lets check the path everytime the route changes, stop or start the idle check as appropriate. router.events.subscribe((val) => { this.currentPath = location.path(); if(this.currentPath.search(/authentication\/login/gi) == -1) idle.watch(); else idle.stop(); }); } reset() { this.idle.watch(); this.idleState = 'Started.'; this.timedOut = false; }} 这篇关于角度6 ng-idle的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！