空闲时间会话到期不会关闭MatDialog弹出窗口。使用@ ng-idle / core

时间:2019-05-14 15:11:33

标签: angular angular-material2 ng-idle

我正在使用@ng-idle/core检测我的angular 7应用程序中的空闲时间。倒数达到1后,我必须导航到会话到期页面。问题是,即使它在后台导航到会话过期页面,倒数弹出窗口也没有关闭。

如下面的网址所示,我已经尝试过this.appRef.tick();

Having issues with ng-idle/core onIdleEnd & Mat-Dialog

import { Component, OnInit, OnDestroy, ApplicationRef } from '@angular/core';
import { Router } from '@angular/router';
import { Idle, DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material';
import { IdleTimeOutComponent } from './components/idle-timeout-warning/idle-timeout.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
  idleState = 'Not started.';
  timedOut = false;
  lastPing?: Date = null;
  private idleTimeOutdialogRef: MatDialogRef<IdleTimeOutComponent>


  constructor(
    private router: Router,
    private idle: Idle,
    public idleTimeWarnDialog: MatDialog,
    public sessionExpiredInfoDialog: MatDialog,
    private appRef: ApplicationRef) {


    // 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.';
      if (idleTimeWarnDialog.openDialogs.length > 0) {
        console.log('dialogs are open');
        //this.idleTimeWarnDialog.closeAll;
        this.idleTimeOutdialogRef.close;
        this.appRef.tick();
      }
    })
    idle.onTimeout.subscribe(() => {
      this.idleState = 'Timed out!';
      this.timedOut = true;
      console.log('timed out before routing');
      this.resetTimeOut;
      this.router.navigate(['/session-expired']);
    });
    idle.onIdleStart.subscribe(() => {
      this.idleState = 'You\'ve gone idle!',
        this.openSessionTimeOutDialog(1);
    });
    //idle.onTimeoutWarning.subscribe((countdown) => this.idleState = 'You will time out in ' + countdown + ' seconds!');

    idle.onTimeoutWarning.subscribe((countdown: any) => {
      this.idleState = 'IDLE_TIME_IN_PROGRESS';

      //this.dialogRef.componentInstance.count = (Math.floor((countdown - 1) / 60) + 1);
      this.idleTimeOutdialogRef.componentInstance.progressCount = this.reverseNumber(countdown);
      this.idleTimeOutdialogRef.componentInstance.countMinutes = (Math.floor(countdown / 60));
      this.idleTimeOutdialogRef.componentInstance.countSeconds = countdown % 60;
    });
    this.reset();
  }

  ngOnInit() { }

  logout() {
    this.authService.logout();
    this.loggedIn = false;
  }

  openSessionTimeOutDialog(count: number) {
    console.log('opening popup');
    const timeOutWarndialogConfig = new MatDialogConfig();
    timeOutWarndialogConfig.disableClose = true;
    timeOutWarndialogConfig.autoFocus = true;
    timeOutWarndialogConfig.panelClass = 'custom-modalbox';
    timeOutWarndialogConfig.data = {
      sessionExpiry: false
    };

    this.idleTimeWarnDialog.closeAll;
    this.idleTimeOutdialogRef = this.idleTimeWarnDialog.open(
      IdleTimeOutComponent,
      timeOutWarndialogConfig
    );

    // this.dialogRef.componentInstance.count = count;
    this.idleTimeOutdialogRef.afterClosed().subscribe((result: any) => {
      if (result !== '' && 'logout' === result) {
        console.log('Logout is initiate');

        const sessionExpdialogConfig = new MatDialogConfig();

        sessionExpdialogConfig.disableClose = true;
        sessionExpdialogConfig.autoFocus = true;
        sessionExpdialogConfig.panelClass = 'custom-modalbox';

        sessionExpdialogConfig.data = {
          sessionExpiry: true
        };
        this.sessionExpiredInfoDialog.closeAll;
        this.sessionExpiredInfoDialog.open(IdleTimeOutComponent, sessionExpdialogConfig);
        //this.logout();
      } else {
        console.log('request to close popup got initiate');
        this.reset();
      }
    });
  }

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

  resetTimeOut() {
    this.idle.stop();
    this.idle.onIdleStart.unsubscribe();
    this.idle.onTimeoutWarning.unsubscribe();
    this.idle.onIdleEnd.unsubscribe();
    this.idle.onIdleEnd.unsubscribe();
  }
}

我希望在onIdleEnd甚至关闭idleTimeOutdialogRef。谁能给我领先我在这里想念的东西吗?/

0 个答案:

没有答案