Angular 2 - 即使用户正在交互，ng-idle 超时

Question

我的问题是即使用户正在与应用程序交互，弹出窗口也会出现。弹出窗口应该只在用户空闲时出现。

session 超时.component.ts

    import { Component, OnInit } from '@angular/core';
            import { Idle, DEFAULT_INTERRUPTSOURCES} from '@ng-idle/core';
         // import { Keepalive } from '@ng-idle/Keepalive';


        @Component({
          selector: 'session-timeout',
          templateUrl: './sessionTimeout.component.html',
          styleUrls: ['./sessionTimeout.component.less']
        })

        export class SessionTimeoutComponent implements OnInit {
          idleState = 'Not started.';
          timedOut = false;
          //lastPing?: Date = null;
          showModal: boolean = false;
          sessionExt: String = "fail";
          maxTimeout = 60; //testing
          idleTime = 10; // testing
          currentTimeOut = 0;
          _model = ModelLocator.getInstance();
          private baseUrl_ssologout: string = "home.ts"
          constructor(public idle: Idle, /*private keepalive: Keepalive,*/ private sessionTimeoutService: SessionTimeoutService) {
            idle.watch();
            // sets an idle timeout of 5 seconds, for testing purposes.
            idle.setIdle(this.idleTime);

            // sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out.
            idle.setTimeout(this.maxTimeout);

            // sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
            // idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
            idle.onTimeout.subscribe(() => {
              if (this.showModal) {
                this.logout();
              }
            });
            idle.onIdleStart.subscribe(() => {
              this.showModal = true;
            });
            idle.onTimeoutWarning.subscribe((countdown) => {
              this.idleState = 'You\'ll logged out in ' + this.getRealCountdown(countdown);
              // idle.clearInterrupts();
            });
          }
    logout() {
        //logout
      }
    stayConnected() {
        this.idle.watch();
        this.idleState = 'Started.';
        this.timedOut = false;
        this.showModal = false;
      }
   }
}

app.component.html

<session-timeout></session-timeout>

<app-header></app-header>
<router-outlet></router-outlet>
<app-amex-footer></app-amex-footer>

如果启用了 idle.setInterrupts(DEFAULT_INTERRUPTSOURCES)，那么问题是如果出现弹出窗口并且用户单击页面上的任意位置，计时器将停止。

我需要当用户处于理想状态时弹出窗口应该出现，并且当显示弹出窗口时用户应该能够通过单击“保持连接”按钮或注销继续。

谢谢。

Answer 1

这就是对我有用的东西。在执行 idle.watch() 之前保留它。 (取消注释您案例中的声明)

idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

然后在 idle.onIdleStart.subscribe() 方法中，在打开模式之前添加:

idle.clearInterrupts();

最后，在 modalRef.result.then() 中，如果结果是“继续”，则将中断设置回默认值。

this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);