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

Posted 2023-03-07

【中文标题】async/await 防止 Angular2 在模板语句中使用时渲染组件

【英文标题】：async/await prevents Angular2 from rendering the component when used in template statement

【发布时间】：2016-07-10 08:28:43

【问题描述】：

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

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

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

【问题讨论】：

你在 Angular 2.4.8 中试过了吗？？ ..因为在 2.4.4 中它对我有用..现在我将 Angular 更新到 2.4.8 ..它不再工作（只有 this.ngZone.run .. 但它很烂！！）

【参考方案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

【讨论】：

现在在 Angular v2.4.4+ 中可以正常工作（没有 ngZone.run）。

@RodolfoJorgeNemerNogueira 感谢您的反馈。哇，我见过的最长的 SO 用户名：D

嗨..有可能重新开始在 Angular 2.4.8 中不起作用？？ ..因为在 2.4.4 中它正在工作..现在我更新了 angular..并且再次仅适用于 this.ngZone.run :-( ..sich!!

“重新开始”是什么意思？你的意思是它又停止工作了吗？

是的！ ...我已将 angular 更新到 2.4.8 并将 node.js 更新到最新（7.6.0）