Возникли проблемы с ng-idle / core в onIdleEnd и Mat-Dialog

Question

Я обнаружил проблему с Ng-Idle, Материал 6 и Angular 6

"@ng-idle/core": "^6.0.0-beta.3"
"@ng-idle/keepalive": "^6.0.0-beta.3"
"@angular/core": "^6.1.9"
"@angular/cdk": "^6.4.7"
"@angular/material": "^6.4.7"

Сценарий

, когда пользователь бездействует, диалоговое окно (всплывающее окно)отображает обратный отсчет времени, пока пользователь не выйдет из системы.Если пользователь вернется до выхода из системы с помощью мыши, обратный отсчет прекратится и диалоговое окно закроется / исчезнет.

Проблема

Однако в Angular 5 эта функция былаработал нормально, пока я не обновил до Angular 6. Когда пользователь возвращается до onTimeout, он запускает onIdleEnd, но диалоговое окно не исчезает при активности мыши.Я создал приложение Angular 6, чтобы повторить проблему.Я пытаюсь определить, является ли это Ng-Idle или угловой проблемой.

Stackblitz с Ng-Idle

Stackblitz, показывающий закрытие Mat-Dialog после10 секундный обратный отсчет

Github

Кто-нибудь сталкивался с этой проблемой?

Answer 1

Хорошо, я не могу комментировать, потому что у меня еще нет репутации, но я хотел поделиться тем, как я обошел это.Я создал родительский элемент

вокруг заголовка / содержимого диалогового окна, который вызывает функцию closeMe () при нажатии.Этот closeMe () вызывает функцию this.dialogRef.close (), которая фактически закрывает диалоговое окно.

Когда ng2-idle запускает наблюдаемую onIdleEnd, я имитирую щелчок по этому родительскому div.Для этого мне нужно было «вставить» объект Idle в диалоговое окно.

Файл моего диалогового окна component.ts:

import { Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { Idle } from '@ng-idle/core';

@Component({
  selector: 'idle-timeout-warning-modal',
  templateUrl: './idle-timeout-warning.component.html',
  styleUrls: ['./idle-timeout-warning.component.css'],
})
export class IdleIimeoutWarningComponent implements OnInit {
  private idle: Idle;

  public countdown: number;

  //Need this in order to close the dialog box on idle end. This is because, for some reason,
  //I cannot do a this.dialogRef.close() in the onIdleEnd subscription.
  @ViewChild('closeMeDiv') closeMeDiv: ElementRef;

  constructor(
    public dialogRef: MatDialogRef<IdleIimeoutWarningComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any, //Data is: {"idleObj":<idle object>, "timeout":<timeoutPeriodSec (integer)>}
  ) { 
    this.idle = data.idleObj;
    this.countdown = data.timeout;
  }

  ngOnInit() { 
    this.idle.onTimeoutWarning.subscribe((countdown: number) => {
      this.countdown = countdown;
    });
    this.idle.onIdleEnd.subscribe(() => { 
      this.closeMeDiv.nativeElement.click();
    });
  }

  closeMe() {
    this.dialogRef.close();
  }
}

Файл html моего диалогового окна:

<div #closeMeDiv (click)="closeMe()">
    <div mat-dialog-title>
        <h3>Please move the mouse or press any key</h3>
        <hr />
    </div>

    <div mat-dialog-content>
        <p>
            You'll be logged out in <span class="idle-label idle-label-warning">{{countdown}}</span>
            second<span *ngIf="countdown != 1">s</span>.
        </p>
    </div>
</div>

Затем в функции настройки простоя (в другой моей службе, где `` `this.idle``` вводится в параметрах конструктора):

let idleStartSec:number = 5;
let timeoutPeriodSec:number = 5;

// sets an idle timeout - will trigger timeout period
this.idle.setIdle(idleStartSec);
// sets a timeout period. after this amount of inactivity, the user will be considered timed out.
this.idle.setTimeout(timeoutPeriodSec);
// sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

this.idle.onIdleStart.subscribe(() => { //Fires when timeout is about to start
  this.dialogRef = this.dialog.open(IdleIimeoutWarningComponent, {
    panelClass: 'modal-lg',
    data: {"idleObj":this.idle, "timeout":timeoutPeriodSec}
  });
});

this.idle.onTimeout.subscribe(() => {
  this.dialogRef.close();
  //Do other stuff here
});

Странно, чтопрямой вызов this.dialogRef.close(); работает в onTimeout, но не в onIdleEnd.

В любом случае, надеюсь, это поможет, пока проблема не будет устранена.

Answer 2

У меня была такая же проблема.Я решил это, нажав изменение угла.

Первый:

{ AppplicationRef } from '@angular/core';

В конструкторе вашего компонента добавьте ChangeDetectorRef:

constructor(private appRef: ApplicationRef)

, затем вызовите его в onIdleEnd:

this.idle.onIdleEnd.subscribe(() => {
    this.showModal = false;
    this.appRef.tick();
});

Решение StackBlitz .