加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > Java > 正文

async-await – async / await防止Angular2在模板语句中使用时呈

发布时间:2020-12-14 05:57:30 所属栏目:Java 来源:网络整理
导读:单击组件的按钮时将执行以下方法. async onClickButton() { await this.shoppingCartService.add(this.selectedOffer); this.router.navigate(['ShoppingCartComponent']);} 数据将添加到购物车,但在导航到下一页时,只会呈现标题,而数据则不会.此方法有效,如
单击组件的按钮时将执行以下方法.
async onClickButton() {
    await this.shoppingCartService.add(this.selectedOffer);
    this.router.navigate(['ShoppingCartComponent']);
}

数据将添加到购物车,但在导航到下一页时,只会呈现标题,而数据则不会.此方法有效,如果不使用async-await,将正确呈现以下页面.
使用ChangeDetectorRef.detectChanges()和ApplicationRef.tick()强制更改检测无效.
离开下一页即ShoppingCartComponent后,将进行渲染,并暂时显示数据.
什么想法可能会出错?

解决方法

这是async / 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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读