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 区域内运行。

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

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

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