Ngile-Angular-如何仅在单击对话框时停止倒计时值

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

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

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

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

});

有人能指导我们怎么做吗？

解决方案： 诀窍是，在执行

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

对话框.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); } } @组成部分({ 选择器：“应用程序对话框”， templateUrl:'./dialog.component.html'， }) 导出类DialogComponent实现OnInit{ 标题：字符串； 正文：字符串； 建造师( 公共dialogRef:MatDialogRef， @注入（MAT_DIALOG_DATA）公共数据：{title，body}）{ this.title=data.title； this.body=data.body； } 关闭（）{ 此.dialogRef.close（true）； } } 在此设置中，如果单击“保持记录”按钮，则退出对话框时显示

result=true

。重新设置计时器，重新开始观察空闲时间

如果你不点击按钮，你最终会被注销

这就是我在长时间试用MatDialog并实时更新其内容（用于倒计时）后得到的

---

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

data:{idleTime:10，timeoutTime:10}，

我想从这一行您正在传递超时值，然后您将能够在

SessionTimeoutDialogComponent

本身中暂停计时器。@ganesh045很抱歉，这一行现在被删除了，我使用了observable来更新对话框上的倒计时值。它现在工作了吗@Ganesh045我试图再次清除并设置间隔，请检查我为同一问题发布的最相关问题。是的，这是一个很好的技巧，我们只需要清除中断，倒计时仍然在运行，这是一个很好的帖子；对我非常有帮助。 @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); } }