Как избежать умножения счетчика при повторном входе пользователя в компонент? - PullRequest
Новая
       22

Как избежать умножения счетчика при повторном входе пользователя в компонент?

0 голосов
/ 16 октября 2019

Я использую пакет angular-user-idle npm для отслеживания неактивного состояния браузера и отображения всплывающего окна сеанса в заданное время ожидания. Библиотека работает хорошо, когда вы не перенаправляете с этого конкретного компонента по таймауту. Когда вы перенаправляете на домашнюю страницу или аналогичную страницу и повторно вводите тот же более ранний компонент, и если на этот раз происходит тайм-аут, всплывающее окно появляется несколько раз.

Теперь, чтобы объяснить вам это, во время 1-й загрузки я отображал номер счетчикакомпонента и 2-й загрузки компонента на скриншотах ниже. Если внимательно посмотреть на второе изображение, то номер каждого счетчика появляется дважды. Что является причиной того, что всплывающее окно появляется несколько раз? Как я могу избежать этого?

enter image description here

enter image description here

  ngOnInit() {

//Start watching for user inactivity.
this.restart();
this.userIdle.startWatching();


// Start watching when user idle is starting.
this.userIdle.onTimerStart().subscribe(count => console.log(count));

// Start watch when time is up.
this.userIdle.onTimeout().subscribe(() => {

  this.openGenericDialog('GenericAlert', "Your session is expired!");


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

      this.stopWatching()
      this.stop();

      this.createUpdateLoggedInRecord('Simulation', 
this.varUser.UserKeyID, false);
      this.router.navigateByUrl('/authentication');
    });

}

);


  }

  stop() {
this.userIdle.stopTimer();
  }

  stopWatching() {
this.userIdle.stopWatching();
  }

  restart() {
this.userIdle.resetTimer();
  }

1 Ответ

1 голос
/ 16 октября 2019

I думаю у вас может быть утечка памяти, потому что вы не отслеживаете свои подписки. 

this.userIdle.onTimeout().subscribe(() => {
...

^^ Это.

Должно быть так(vv) 

this.userIdle.onTimeout()
    .pipe(take(1))
    .subscribe(() => {
    ...
...