Chcę utworzyć funkcję limitu czasu sesji dla strony płatności, w której zegar zostanie wyświetlony na mojej stronie i po 5 minutach sesja płatnicza wygasa, a użytkownik zostanie przekierowany do poprzedniej strony. Używam kątowego 4 dla mojego przodu, więc użycie href nie jest rozrywki, chcę rozwiązanie z udziałem tylko javascript i routerLink i typescript. Jakieś sugestie?

Używam tej funkcji, aby pokazać timer na stronie internetowej, działa, ale nie mogę tutaj użyć routerlink tutaj, aby przekierować do poprzedniej strony.

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

}

-1
BlizZard 4 czerwiec 2018, 09:28

3 odpowiedzi

Najlepsza odpowiedź
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);
}

Teraz możesz wyświetlić timer, a użytkownik zostanie przekierowany.

Jeśli chcesz odwrócony timer:

    this.timer.s -= 1;
    if (this.timer.s < 0) {
      this.timer.s = 59;
      this.timer.mn = -1;
    }
1
user4676340user4676340 4 czerwiec 2018, 06:33

Korzystanie z RXJS Timer Obserwowalny, a niektórzy operatorzy będą czystym rozwiązaniem.

Można utworzyć dwa obserwowały (funkcja secondsToStringDate powinna być wdrożona, Przykład):

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

Teraz, gdy utworzyłeś swoje obserwownienia, możesz ich użyć:

Aby uruchomić pożądane zachowanie, gdy wygasa czas:

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

Aby dodać, gdzie chcesz wyświetlić czas w szablonie:

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

Aby uzyskać bezpieczne rozwiązanie, należy dodać rozwiązanie backend i nie polegać tylko na JavaScript.

0
ibenjelloun 4 czerwiec 2018, 08:37

Tak, możesz to zrobić w ten sposób.

W pliku komponentu TS.

constructor(private router: Router) {
     setTimeout(() => {
       this.routerNavigate(['/routeYouWantToNavigate']);
     }, 300000);
  }
0
Anuradha Gunasekara 4 czerwiec 2018, 06:33