Angular навигация блокирует рендеринг HTML при использовании navigateByUrl, но позволяет запускать машинописный код ⇐ Javascript

[Anonymous]

Я работаю с Angular, и у меня возникла проблема: моя страница succesfullPayment не загружает HTML-документ, но позволяет запускать машинописный текст компонента. Начнем с моего компонента ts:

Код: Выделить всё

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

});}}

В чем, скорее всего, проблема:
Я думаю, что происходит то, что this.router.navigateByUrl('/dashboard');< /code> срабатывает до полной загрузки текущего html-документа, в результате чего angular запускает другое перенаправление до того, как текущий будет полностью завершен. Чтобы преодолеть эту проблему, я попытался сделать следующее:
1- Настройка setTimeout функция:
Я попытался передать компоненту успешного платежа за 30 секунд до запуска перенаправления, чтобы дать достаточно времени для загрузки HTML и для чтения пользователем компонентов страницы, однако это не сработало.
2- Установка переменной isLoaded и превращение ее в наблюдаемую, чтобы линия перенаправления срабатывала только в том случае, если для isLoaded установлено значение true, но проблема остается та же самая произошло.
Важные примечания
1. Оба предложенных выше решения сработали нормально, когда я закомментировал this.router.navigateByUrl('/dashboard' ); поэтому я действительно не уверен, почему именно эта строка вызывает столько проблем с Angular!
2- Хотя html-документ не загружается, машинописный код выполняется, и это дает желаемый эффект в бэкэнд. Проблема в том, что он выдает ошибку во внешнем интерфейсе и даже не позволяет перенаправить на «/dashboard»
Вопросы
1. Почему рендеринг страницы прерывается, когда я запускаю навигацию маршрутизатора после выполнения HTTP-запроса?
2. Как я могу обеспечить правильное отображение страницы? прежде чем уйти?
Любая помощь будет очень полезна оценил!

Подробнее здесь: https://stackoverflow.com/questions/793 ... ed-but-all