router.navigate 在异步函数中不起作用

Question

router.navigate 不起作用，页面未重定向到查看器页面。但是如果我在最后一行添加断点，就可以了。

TS：

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

HTML：

<button
        mat-raised-button
        class="approve-button"
        color="primary"
        (click)="onApprove()"
      >
        Approve
      </button>

如何在异步函数中成功重定向到另一个页面？

Answer 1

如果没有看到

approveA

或

approveB

函数，很难知道异步是否是正确的方法。如果

approveA

和

approveB

需要等待，因为它们调用 API 端点，那么我个人会迁移到订阅，并让

approveA

/

approveB

函数在订阅成功完成时处理导航。

但是，使用您提供的代码，我建议尝试以下所示的模式：

  public async onApprove(): void {
    if (this.status === true) {
      await this.approveA()
        .then((res) => this.handleNavigation()
        .catch((error) => console.error(error);
    } else {
      await this.approveB()
        .then((res) => this.handleNavigation()
        .catch((error) => console.error(error);
    }
  }

  private handleNavigation(): void {
    this._router.navigate(['/', 'TaskViewer', this.id]); // Add breakpoint 
  }

此外，您的函数被定义为返回类型为

Promise<void>

但不返回任何内容，我通常希望这会引发编译错误？