HttpClient 中的角度变化检测答案

【问题标题】：Angular Change Detection in HttpClientHttpClient 中的角度变化检测
【发布时间】：2017-09-29 18:24:46
【问题描述】：

我有一个HttpClient 服务，它正在更新后端的数据。在后端处理过程中，我通过this.isLoading = true 显示加载状态，在成功处理后，我通过使用this.isLoading = false; 删除subscribe() 中的加载状态。

现在我将代码更改为使用ChangeDetectionStrategy.OnPush，并且加载状态不再消失。我知道ChangeDetectionStrategy.OnPush 中的更改检测发生在input 属性更改或在组件等事件期间更改对象引用时。

在我的情况下，我是否必须手动调用 ChangeDetectorRef.detectChanges() 来触发更改检测，还是我遗漏了什么？

编辑

为了清楚起见，我正在使用this.isLoading 通过相应地在 HTML 元素上添加/删除类来显示/隐藏加载状态。例如，

<div [class.processing]="isLoading"></div>

【问题讨论】：

组件是否从其他组件接收@Input()？，如果没有删除ChangeDetection.OnPush() o 你可以使用async 管道。
@JSingh，感谢您的评论。不，组件没有收到@Input，它维护一个局部变量isLoading（布尔值）来显示/隐藏加载状态。我认为async 不适用于布尔值？我已更新问题，请再次查看。
如果组件没有收到@Input 那么它不会触发更改。你能发布你的模板吗
@JSingh，刚刚更新了问题。请看更新的。谢谢。
尝试将[class.processing]更改为<div [ngClass]="{'processing': isLoading}"></div>

标签： javascript angular angular2-changedetection

【解决方案1】：

将 ChangeDetectionStrategy 设置为 OnPush 时，仅当输入发生更改时才会运行更改检测。由于您订阅了 observable 并更改了局部变量，因此 angular 不会收到此更改的通知，因此您必须自己让它知道。推荐的方法是使用 ChangeDetectorRef.markForCheck() 它将在组件上方的树分支上执行更改检测

great thoughtram article 中有更多关于此的更多信息

还有一个出色的presentation here by Pascal Precht

【讨论】：