查看我的整个应用程序的事件，并在不活动的时间流逝时注销

Question

提前感谢您的回复。我正在实施不活动注销，它工作正常。现在我只在我的家庭组件中实现了它，但是，当然我想在我的整个应用程序中使用它。我在 app.component.ts 中尝试过，但问题是它只在您加载页面并登录时工作一次，它开始监视整个应用程序，但是当它注销您时它不再工作，因为 app.component onInit 只触发一次，除非页面重新加载。我不知道如何在不必在应用程序的每个组件中复制此代码的情况下执行此操作。 有什么想法吗？

这是我的代码：

这个组件被注入到我的家.component.ts

import { Component, OnInit, NgZone, ChangeDetectorRef } from '@angular/core';
import { ProvisionedService } from '../../devices/provisioned-list/provisioned.service';
import { UsersService } from '../../users/users.service';
import { fromEvent, merge, interval, Observable, of, Subscription } from 'rxjs';
import { switchMap, take, skipWhile, takeLast, skipUntil, tap } from 'rxjs/operators';
import { FuseConfirmDialogComponent } from "@fuse/components/confirm-dialog/confirm-dialog.component";
import { MatDialogRef, MatDialog } from "@angular/material";
import { StorageService } from '../../common/services/storage.service';
import { AuthService } from '../../common/services/auth.service';
import { Router } from '@angular/router';

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
deviceList: DeviceModel[];
devicesAlive: any;
vanillaDevices: DeviceModel[];
getDevicesInfoLoop: any;
isAlive: any;
invitationList: InvitationModel[];
deviceId: any
inactivityTime: number = 15;
timeLapsedSinceInactivity: number = 0;
seconds: number = this.padZero(0);
subscription: Subscription;
observeable$: Observable<any>;
mergedObservable$: Observable<any>;
event: Event;
confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
public inactivityTimerEvent: Array<any>[] = [[document, 'click'], [document, 'wheel'], [document, 'scroll'], [document, 'mousemove'],
[document, 'keyup'], [window, 'resize'], [window, 'scroll'], [window, 'mousemove']];

constructor(private provisionedService: ProvisionedService, private VanillaService: VanillaService, 
private UsersService: UsersService, public _ngZone: NgZone,
public _cd: ChangeDetectorRef,
public matDialog: MatDialog,
public storageService: StorageService,
private authService: AuthService,
private router: Router) {
}
ngOnInit() {
let observableArray$: Observable<any>[] = [];
this.inactivityTimerEvent.forEach(x => {
observableArray$.push(fromEvent(x[0], x[1]))
})
this.mergedObservable$ = merge(...observableArray$);
this.startTimer(event);

}
public createObserable(): void {
this._ngZone.runOutsideAngular(() => {
this.observeable$ = this.mergedObservable$
.pipe(
switchMap(ev => interval(1000).pipe(take      (this.inactivityTime))),
tap(value => this.isItTimeToShowPopUp(value)),
skipWhile((x) => {
this.timeLapsedSinceInactivity = x;
return x != this.inactivityTime - 1
})
);
this.subscribeObservable();
})
}
public isItTimeToShowPopUp(val: number) {
let timeLeftForInactive = this.inactivityTime - val;
if (timeLeftForInactive <= 15) {
this.timeLapsedSinceInactivity = timeLeftForInactive;
this.seconds = this.padZero(timeLeftForInactive % 15);
this._cd.detectChanges();
console.log(timeLeftForInactive);
}

if(timeLeftForInactive === 1) {
this.authService.removeUserData();
this.storageService.removelocalStorageData();
this.router.navigate(['/login']);
}
}

public subscribeObservable() {
this.subscription = this.observeable$.subscribe((x) => {
console.log(`subscribed for ${x + 1} sec`);
this.unsubscribeObservable()
})
}
public padZero(digit: any) {
return digit <= 9 ? '0' + digit : digit;
}
public unsubscribeObservable() {
console.log('  unsubscriebd')
this.subscription.unsubscribe();
}
public startTimer($event) {
this.createObserable();
console.log('subscription started');
}
public stopTimer(event) {
if (this.subscription && !this.subscription.closed) {
this.seconds = this.padZero(0);
this.unsubscribeObservable();
}
}

}

Answer 1

你应该把你的代码放在app.component.ts或者最好做单独的服务来处理这个问题。

以便整个应用程序都可以使用它。

Answer 2

是的，你是对的。当我在我的应用程序中实现会话空闲超时功能时，这篇文章帮助了我。 [https://stackoverflow.com/a/51651151/12222270]

这是我的应用程序.component.ts

import { Component, HostListener } from '@angular/core';
import { Router } from '@angular/router';
import { Subject } from 'rxjs/index';

@Component({
providers: [],
selector: 'intellect-app',
styleUrls: ['./app.component.scss'],
templateUrl: './app.component.html'
})
export class AppComponent {
private userActivity;
private userInactive: Subject<any> = new Subject();
public constructor(
private router: Router
) {
this.startTimer();
this.userInactive.subscribe(() => this.router.navigateByUrl('/login'));
}
private startTimer() {
this.userActivity = setTimeout(() => this.userInactive.next(undefined), 5000);
}
@HostListener('window:resize')
@HostListener('window:scroll')
@HostListener('window:mousemove')
@HostListener('document:click')
@HostListener('document:wheel')
@HostListener('document:scroll')
@HostListener('document:mousemove')
@HostListener('document:keyup') resetTimer() {
clearTimeout(this.userActivity);
this.startTimer();
}
}