使用“navigateByUrl”时导航会阻止 HTML 渲染，但允许运行 Typescript 代码

Question

我正在使用 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');

在当前 html 文档完全加载之前触发，导致 Angular 在当前文档完全加载之前触发另一个重新路由，为了克服这个问题，我尝试了以下操作：

1- 设置

setTimeout

功能： 我尝试在触发重新路由之前给

successfullpayment

组件 30 秒的时间，以便有足够的时间加载 html 并让用户阅读页面组件，但这不起作用。

2- 设置

isLoaded

变量并使其成为可观察的，以便仅当

isLoaded

切换到

true

时才会触发重定向行，但仍然出现同样的问题。

重要注意事项

1-当我注释掉

this.router.navigateByUrl('/dashboard');

时，上述两种尝试的解决方案都工作得很好，所以我真的不确定为什么这条特定的线会给 Angular 带来如此大的麻烦！

2-虽然没有加载html doc，但执行了typescript代码，并且在后端达到了预期的效果。问题是它在前端给出错误，甚至不允许重定向到

'/dashboard'

问题

1- 为什么在完成HTTP请求后触发路由器导航时页面渲染会中断？

2- 如何确保页面在离开之前正确呈现？

任何帮助将不胜感激！

Answer 1

您可能启用了 SSR，这可能会导致 HTML 加载时间晚于预期。

将整个逻辑包装在

isPlatformBrowser

函数中，以便代码仅在浏览器上执行。

import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, PLATFORM_ID } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

@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,
    @Inject(PLATFORM_ID) private platformId: Object,
  ) {}

  ngOnInit(): void {
    if(isPlatformBrowser(this.platformId)) {
        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'); 
          }
      
    
        });
    }
  }
}