Создание функции тайм-аута сеанса, которая может отображать таймер и перенаправлять на предыдущую страницу по таймауту в угловых - PullRequest
Новая
       7

Создание функции тайм-аута сеанса, которая может отображать таймер и перенаправлять на предыдущую страницу по таймауту в угловых

0 голосов
/ 04 июня 2018

Я хочу создать функцию тайм-аута сеанса для страницы оплаты, где таймер будет отображаться на моей веб-странице, и через 5 минут сеанс оплаты истечет, и пользователь будет перенаправлен на предыдущую страницу.Я использую Angular 4 для своего внешнего интерфейса, поэтому использование href не развлекает, я хочу решение, включающее только javascript и routerLink и typescript.Любые предложения?

Я использую эту функцию, чтобы показать таймер на веб-странице, он работает, но не могу использовать routerLink здесь, чтобы перенаправить на предыдущую страницу. 

paymentSessionTimer() {
let downloadButton = document.getElementById("paymentSession");
var counter = 600;
var newElement = document.createElement("p");
newElement.innerHTML = "10";
var id;
this.redirectFlag = "false";

downloadButton.parentNode.replaceChild(newElement, downloadButton);

id = setInterval(function() {
  counter--;
  if(counter < 0) {
      newElement.parentNode.replaceChild(downloadButton, newElement);
      clearInterval(id);

      this.redirectFlag = "true";     
      //this.router.navigate(['../search']);
  } else {
    newElement.innerHTML = counter.toString() + " seconds left.";  
  }
}, 1000);
this.router.navigate(['../previous']);

}

Ответы [ 3 ]

0 голосов
/ 04 июня 2018

Да, вы можете сделать это следующим образом.

в файле ts вашего компонента. 

constructor(private router: Router) {
     setTimeout(() => {
       this.routerNavigate(['/routeYouWantToNavigate']);
     }, 300000);
  }
0 голосов
/ 04 июня 2018

Использование rxjs таймер Наблюдаемые и некоторые операторы будут чистым решением.

Вы можете создать две наблюдаемые (должна быть реализована функция secondsToStringDate, пример ): 

// Fires every second for 5 minutes then completes
sessionExpiration$ = timer(1000).pipe(take(60 * 5));

// Every second, generate a displayable string mm:ss
sessionRemainingTime$ = sessionExpiration$
 .pipe(map(seconds => secondsToStringDate(seconds)));

Теперь, когда вы создали свои Observables, вы можете использовать их:

Чтобы запустить желаемое поведение по истечении времени: 

sessionExpiration$.pipe(finalize(() => {
    // Fired when the sessionExpiration$ observable completes
    // You can put what you want to do when session expires
}).subscribe();

Добавитьгде вы хотите отобразить время в своем шаблоне: 

<!-- Will display the time in the template --> 
{{sessionRemainingTime$ | async}}

Для безопасного решения вы должны добавить внутреннее решение, а не полагаться только на JavaScript.

0 голосов
/ 04 июня 2018 
import { Location } from '@angular/common';

timer = {s: 0, mn: 0};

constructor(private location: Location) {
  setTimeout(() => {
    this.location.back();
  }, 300000);

  setInterval(() => {
    this.timer.s += 1;
    if (this.timer.s > 59) {
      this.timer.s = 0;
      this.timer.mn += 1;
    }
  }, 1000);
}

Теперь вы можете отобразить таймер, и пользователь будет перенаправлен.

Если вы хотите повернуть таймер: 

    this.timer.s -= 1;
    if (this.timer.s < 0) {
      this.timer.s = 59;
      this.timer.mn = -1;
    }
...