async-await - async/await 在模板语句中使用时阻止 Angular2 渲染组件

Question

点击组件的按钮时将执行以下方法。

async onClickButton() {
    await this.shoppingCartService.add(this.selectedOffer);
    this.router.navigate(['ShoppingCartComponent']);
}

数据将被添加到购物车，但在导航到下一页时，只会呈现标题，数据不会。此方法有效，如果不使用 async-await，将正确呈现以下页面。使用 ChangeDetectorRef.detectChanges() 和 ApplicationRef.tick() 强制更改检测无效。离开下一个页面后，即 ShoppingCartComponent 开始渲染，数据将显示片刻。有什么想法会出错吗？

Answer 1

这是 async/await 的已知问题。它会导致 await 之后的代码不在 Angulars 区域内运行。

作为解决方法，您需要在构造函数中注入(inject) NgZone 并将您的代码更改为

async onClickButton() {
    await this.shoppingCartService.add(this.selectedOffer);
    this.ngZone.run(() => {
      this.router.navigate(['ShoppingCartComponent']);
    });
}

另见 https://github.com/angular/angular/issues/322