NgIdle -Angular-仅在单击对话框时如何停止倒计时值 [英] NgIdle -Angular- How to stop the countdown value only when we click on dialog

问题描述

我在我的角度应用程序中实现了会话超时模块，该模块监视空闲时间并打开会话超时对话框，并在对话框上显示倒计时值.问题是，当我在该屏幕上移动鼠标或至少触摸该屏幕时，递减计数值会停止，但是我只想在不单击对话框上的任何内容时才在对话框上停止递减计数值.我认为，如果我们在下面的链接此处

I have implemented a session timeout module in my angular app which monitors idle time and opens the session time out dialog and shows the countdown value on the dialog. The problem is count down value is stopping when ever i moved my mouse on that screen or atleast on touching that screen but i want to stop the countdown value on the dialog only when i click anything on the dialog not the screen . I thought this can be do this if we give the custom interrupts as shown in the below link here

例如，如果我仅配置鼠标单击，它可以停止对话框上的倒计时，但这没有发生.可能是因为我从另一个组件打开了会话超时dilaog.

For ex if i configure for only mouse click it can stop the countdown on the dialog, but that is not happening. May be that issue might be because of i am opening the session timeout dilaog from the another component.

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

But i am not able to stop the count down , Here is my sample code

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);

});

任何人都可以指导我们如何做到这一点吗?

Can anyone guide how can we do this ?

推荐答案

解决方案: 诀窍是，通过调用this.idle.clearInterrupts()来清除中断，只需调用this.idle.clearInterrupts()即可，该操作删除了事件侦听器，但实际的倒计时仍在继续，可以根据对话中的用户操作重置或结束，

SOLUTION: The trick is, clear the interrupts just when you do idleStart by calling this.idle.clearInterrupts(), which removes the event listeners, but the actual countdown is still going on, which can either reset or end based on user action in the dialogue,

这是我所做的:

    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(['/']);
    });

想法是在空闲开始后立即clearInterrupts()，这样就不会捕获任何事件.

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

然后，打开对话框，在时间段idle.setTimeout(period)中，您将看到倒计时. 现在，假设您有一个dialog.component.html:

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:

    @Component({
        selector: 'app-dialog',
        templateUrl: './dialog.component.html',
    })
    export class DialogComponent implements OnInit {
        title: string;
        body: string;

        constructor(
            public dialogRef: MatDialogRef,
            @Inject(MAT_DIALOG_DATA) public data: {title, body}) {

            this.title = data.title;
            this.body = data.body;
        }

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

在此设置中，如果单击按钮:保持记录"，则使用result=true退出对话框.您重置了计时器并重新开始观察空闲状态.

In this setup, if you click the button: 'STAY LOGGED', you exit the dialog with result=true. You reset the timers and start watching the idle all over again.

如果您不单击按钮，最终将注销.

If you don't click the button, you'll be eventually logged out.

这是我长时间尝试MatDialog并实时更新其内容(倒计时)后所带来的.

This is what I came with after long hours of experimenting with MatDialog and updating it's contents in realtime (for the countdown).

在我看来工作已经完成！

It looks to me that the job is done!

这篇关于NgIdle -Angular-仅在单击对话框时如何停止倒计时值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！