Angular 即使在用户交互时,角度2-ng空闲超时

Angular 即使在用户交互时,角度2-ng空闲超时,angular,session-timeout,ng-idle,Angular,Session Timeout,Ng Idle,我的问题是,即使用户与应用程序交互,弹出窗口也会出现。 只有当用户空闲时,弹出窗口才会出现 session-timout.component.ts import { Component, OnInit } from '@angular/core'; import { Idle, DEFAULT_INTERRUPTSOURCES} from '@ng-idle/core'; // import { Keepalive } from '@ng-idl

我的问题是,即使用户与应用程序交互,弹出窗口也会出现。 只有当用户空闲时,弹出窗口才会出现

session-timout.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(默认的中断源),那么问题是如果弹出窗口出现并且用户单击页面上的任何位置,计时器将停止

我需要弹出窗口应该出现时,用户是理想的,当弹出窗口显示时,用户应该能够继续点击“保持连接”按钮或注销


谢谢。

这就是对我有用的东西。 在你空闲之前保持这个状态。观察()。(在您的案例中取消对语句的注释)

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

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

this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

尝试在app.component.ts或您的布局文件中实现。我在app.component.html中包含了会话超时选择器。这对我不起作用吗?你能检查一下这个链接吗。这是行不通的。一旦调用了clearInterrupts,我认为lib将停止拾取单击和鼠标事件,即使您随后使用setInterrupts
this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);