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