Angular ng idle/core ONIDLEND&;出现问题;Mat对话框
我发现了一个关于Ng闲置、材料6和角度6的问题Angular ng idle/core ONIDLEND&;出现问题;Mat对话框,angular,angular-material2,ng-idle,Angular,Angular Material2,Ng Idle,我发现了一个关于Ng闲置、材料6和角度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" 情景 当用户空闲时,一个对话框(弹出窗口)会显示用户注销系统前的倒计时时间。如果用户在使用鼠标活动注销之前返回,则倒计时将停止,对话框将关闭/消失
"@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空闲还是角度问题
有人遇到过这个问题吗?我也遇到过同样的问题。我通过改变角度来解决这个问题 第一:
{ AppplicationRef } from '@angular/core';
在组件的构造函数中添加ChangeDetectorRef:
constructor(private appRef: ApplicationRef)
然后在onIdleEnd上调用它:
this.idle.onIdleEnd.subscribe(() => {
this.showModal = false;
this.appRef.tick();
});
.好的,我不能发表评论,因为我还没有名声,但我想分享一下我是如何解决这个问题的。我所做的是围绕我的对话框标题/内容创建一个父元素,它在单击时调用closeMe()函数。此closeMe()调用“This.dialogRef.close()”函数,该函数实际上会关闭对话框 当ng2 idle触发onIdleEnd observable时,我模拟单击父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();
}
}
奇怪的是,对this.dialogRef.close()的直接调用代码>在onTimeout中工作,但在onIdleEnd中不工作
无论如何,希望这能帮助解决问题。这对我不起作用!我更新了Stackblitz上的代码,但没有效果!我甚至尝试将ChangeDetectionStrategy
显式更新为OnPush
。因此,您对ChangeDetection的回答就是所需的。我会用我所做的更新你的答案。谢谢你的贡献,我想出了一个更简单的方法。没问题!愿意分享吗?我很想知道!这是公认的答案。我用ApplicationRef更新了ChangeDetection。
<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>
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
});