我发现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还是Angular问题。
Stackblitz showing Mat-Dialog closing after 10 second countdown
有人遇到这个问题吗?
答案 0 :(得分:2)
我有同样的问题。我通过推动角度变化来解决它。
第一:
{ AppplicationRef } from '@angular/core';
在组件的构造函数中添加ChangeDetectorRef:
constructor(private appRef: ApplicationRef)
然后在onIdleEnd上调用它:
this.idle.onIdleEnd.subscribe(() => {
this.showModal = false;
this.appRef.tick();
});
答案 1 :(得分:0)
好的,我无法发表评论,因为我还没有声誉,但是我想分享一下我的工作方式。我所做的是在对话框标题/内容周围创建一个父
当ng2-idle触发可观察到的onIdleEnd时,我模拟了对该父div的点击。为此,我需要将“空闲”对象“注入”对话框。
我的对话框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中不起作用。
无论如何,希望这对您有所帮助,直到问题解决。