Code: Select all
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-succesfull-payment',
standalone: true,
imports: [FormsModule, CommonModule],
templateUrl: './succesfull-payment.component.html',
styleUrl: './succesfull-payment.component.css'
})
export class SuccesfullPaymentComponent implements OnInit{
token! : any;
payerId!: any;
orderId!: any;
constructor(private route: ActivatedRoute, private router: Router, private http:
HttpClient) {}
ngOnInit(): void {
console.log("successfully paym,ent page loaded!!!!");
this.route.queryParams.subscribe(params => {
this.token = params['token'];
this.payerId = params['payerId'];
this.orderId = params['orderId'];
console.log(`paymentId aka token: ${this.token}`);
console.log(`orderId: ${this.orderId}`);
if(this.token && this.orderId){
console.log(`paymentId aka token: ${this.token}`);
console.log(`orderId: ${this.orderId}`);
console.log('about to send capture payment request');
this.http.post(`http://localhost:3000/capturePayment`, {token: this.token, orderId: this.orderId})
.subscribe({
next:(data: any)=>{
if (data.success){
console.log(` ${data.message}`);
this.router.navigateByUrl('/dashboard'); //this line prevents successfull-payment from rendering its html doc
} else{
alert(data.message);
}
},error : (error: any) =>{
console.error('error: ', error);
}
});
console.log('sent capture payment request successfully');
}
});}}
Ich denke, was passiert, ist, dass this.router.navigateByUrl('/dashboard');< /code> wird ausgelöst, bevor das aktuelle HTML-Dokument vollständig geladen ist, was dazu führt, dass Angular eine weitere Umleitung auslöst, bevor das aktuelle Dokument vollständig geladen ist. Um dies zu beheben, habe ich Folgendes versucht:
1- Einstellung eine setTimeout-Funktion:
Ich habe versucht, der Komponente „Erfolgreiche Zahlung“ 30 Sekunden vor dem Auslösen der Umleitung zu geben, um genügend Zeit für das Laden von HTML und für den Benutzer zum Lesen der Seitenkomponenten zu lassen, aber das hat nicht funktioniert.
2- Legen Sie eine isLoaded-Variable fest und machen Sie sie zu einem Observable, sodass die Umleitungszeile nur dann ausgelöst wird, wenn isLoaded auf „true“ gesetzt ist, aber das gleiche Problem ist weiterhin aufgetreten.
Wichtige Hinweise
1- Beide oben genannten Lösungsversuche funktionierten einwandfrei, als ich this.router.navigateByUrl('/dashboard' auskommentiert habe ); Ich bin mir also wirklich nicht sicher, warum diese bestimmte Zeile Angular so viele Probleme bereitet!
2- Obwohl das HTML-Dokument nicht geladen ist, wird der Typoskript-Code ausgeführt. und es hat den gewünschten Effekt im Backend. Das Problem ist, dass es im Frontend einen Fehler gibt und nicht einmal eine Umleitung zu „/dashboard“
Fragen
1- Warum bricht das Rendern der Seite ab, wenn ich nach Abschluss der HTTP-Anfrage die Router-Navigation auslöse?
2- Wie kann ich sicherstellen, dass die Seite ordnungsgemäß gerendert wird? bevor Sie losfahren?
Jede Hilfe wäre sehr hilfreich geschätzt!