async函数中router.navigate跳转失效，如何实现成功页面跳转？

这种现象的核心原因通常有两个：要么是异步操作跳出了Angular的变更检测上下文，导致路由跳转的状态更新没被Angular捕获；要么是approveA()/approveB()没有正确返回Promise，使得await没等异步操作完成就执行了跳转——加断点时浏览器暂停，恰好给了异步操作完成的时间，所以跳转生效。

下面是几种可行的解决方法：

方案1：用NgZone包裹路由跳转代码 #

Angular的NgZone负责管理应用的变更检测周期，当异步操作跑出Zone时，变更检测不会自动触发。把跳转代码放进NgZone.run()方法里，强制让操作回到Angular的变更检测上下文：

首先在组件中注入NgZone：

import { NgZone } from '@angular/core';
import { Router } from '@angular/router';

constructor(private _router: Router, private ngZone: NgZone) {}

修改onApprove函数：

async onApprove(): Promise<void> {
  if (this.status === true) {
    await this.approveA();
  } else {
    await this.approveB();
  }
  this.ngZone.run(() => {
    this._router.navigate(['/', 'TaskViewer', this.id]);
  });
}

方案2：确保approveA/approveB正确返回Promise #

检查approveA()和approveB()函数，确认它们确实返回Promise，否则await不会等待异步操作完成：

如果是HTTP请求（Angular HttpClient返回Observable），需要转换成Promise：

approveA(): Promise<any> {
  return this.http.post('/api/approve-a', {}).toPromise();
}

如果是自定义异步逻辑，要手动返回Promise：

approveA(): Promise<void> {
  return new Promise((resolve) => {
    // 这里写你的异步操作逻辑
    setTimeout(() => {
      // 操作完成后resolve
      resolve();
    }, 1000);
  });
}

方案3：手动触发变更检测 #

如果跳转后页面状态仍未更新，可以注入ChangeDetectorRef，在跳转前手动触发变更检测：

首先注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

constructor(private _router: Router, private cdr: ChangeDetectorRef) {}

修改onApprove函数：

async onApprove(): Promise<void> {
  if (this.status === true) {
    await this.approveA();
  } else {
    await this.approveB();
  }
  this.cdr.detectChanges(); // 手动触发变更检测
  this._router.navigate(['/', 'TaskViewer', this.id]);
}

内容的提问来源于stack exchange，提问作者Liu Sophie