angular - NgIdle -Angular-仅当我们单击对话框时如何停止倒计时值

Question

我在我的 Angular 应用程序中实现了一个 session 超时模块，它监控空闲时间并打开 session 超时对话框并在对话框上显示倒计时值。问题是当我在该屏幕上移动鼠标或至少触摸该屏幕时，倒计时值停止，但我只想在我单击对话框上的任何内容而不是屏幕时才停止对话框上的倒计时值。我认为如果我们提供自定义中断，如下面的链接 here 所示，可以做到这一点。

例如，如果我只配置鼠标单击，它可以停止对话框上的倒计时，但这不会发生。可能是这个问题可能是因为我正在从另一个组件打开 session 超时对话框。

但我无法停止倒计时，这是我的示例代码

this.idle.onIdleStart.subscribe(() => {
  console.log('on idle start');
  let dialogRef;

  if (this.dialogRef === undefined || this.dialogRef === null) {

    dialogRef = this.dialog['open'](SessionTimeoutDialogComponent, {
      width: '30%',
      data: {idleTime: 10, timeoutTime: 10},
      panelClass: 'session-timeout-dialog'
    });
    this.dialogRef = dialogRef;
  }

  this.dialogRef.afterClosed().subscribe(result => {
    this.timeoutTime = result;
  });
  this.dialogRef = dialogRef;
});


 this.idle.onTimeoutWarning.subscribe((countdown) => {
  this.timeoutTime = countdown;
  this.dataService.changeVersionSelectionData(countdown);

});

谁能指导我们如何做到这一点？

Answer 1

解决方案:
诀窍是，在执行 idleStart 时清除中断调用 this.idle.clearInterrupts() ，这会移除事件监听器，但实际的倒计时仍在进行，可以根据对话中的用户操作重置或结束，

这是我所做的:

    this.idle.onIdleStart.subscribe(() => {
      console.log('on idle start');

      this.idle.clearInterrupts();

      const dialogConfig = new MatDialogConfig();
      dialogConfig.disableClose = true;
      dialogConfig.data = { title, body };

      const dialogRef = this.dialog.open(DialogComponent, dialogConfig);

      dialogRef.afterClosed().subscribe(result => {
        console.log('The dialog is closed. Result='+result);
        if (result)
          this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
          this.idle.watch();
        });
        this.dialogRef = dialogRef;
        return dialogRef.afterClosed();
      }
    });

    this.idle.onTimeoutWarning.subscribe((countdown) => {
      this.dialogRef.componentInstance.body='You will be logged out in '+countdown+'seconds!';
    });

    this.idle.onTimeout.subscribe(() => {
      console.log('timeout..');
      this.dialogRef.close();
      this.logout();
      this.router.navigate(['/']);
    });

The idea is to clearInterrupts() just after idle starts so no events are caught.

Then, you open the dialog and for the period idle.setTimeout(period) you see the countdown in it. Now, say you have a dialog.component.html:

    <h1 mat-dialog-title>{{ title }}</h1>
    <div mat-dialog-content>
        <p>{{ body }}</p>
    </div>
    <div mat-dialog-actions style="text-align: center;">
        <button mat-button (click)="close()">STAY LOGGED</button>
    </div>

和 dialog.component.ts :

@零件({
选择器:'应用程序对话框'，
templateUrl: './dialog.component.html',
})
导出类 DialogComponent 实现 OnInit {
标题:字符串；
正文:字符串；

构造函数(
公共(public) dialogRef:MatDialogRef，
@Inject(MAT_DIALOG_DATA) 公共(public)数据:{title, body}) {

this.title = 数据.title;
this.body = 数据.body;
}

关闭() {
this.dialogRef.close(true);
}
}

在此设置中，如果您单击按钮:“保持记录”，您将使用 result=true 退出对话框。 .您重置计时器并重新开始观看空闲。

如果您不单击该按钮，您最终将被注销。

这是我在长时间试验 MatDialog 并实时更新其内容(用于倒计时)后得到的。

在我看来，这项工作已经完成了!