Angular2 变化检测 "Expression has changed after it was checked"

Question

我在 Angular2（最终版本）中遇到了关于组件之间的变化检测和数据流的问题。我已经解决了它，但对我来说似乎有点老套所以想知道是否有更好的方法。

基本上我有一个组件 A，它有一个子组件 B，还有 *ngFor 创建了许多子组件 C。

对于每个组件 C，都有一个 @Output 定义，它在父组件 A 中为 C 的每个实例处理。根据该输出，确定组件 A 上的另一个属性（只是一个数字）并且在组件 B 上用作 @Input。

在 DEV 模式下，每次触发组件 C 中的 @Output 时，控制台都会出现以下错误：

Expression has changed after it was checked. Previous value: XX. Current value: XX.

从阅读中可以看出，由于 Angular2 中的单向数据流，这是一种预期。我想知道如何让它在我的场景中正常工作？

我临时在组件 A 中注入 ChangeDetectorRef 并在处理来自 C 实例的 @Output 事件的函数中调用它的 detectChanges() 方法。我担心它不是很有效。我可能会尝试改进它并仅在最后一个项目的事件之后调用它（所有 C 组件同时发送该事件）但是我会担心事件的异步性质和一些意外行为。

有没有人知道如何解决这个问题？就组件之间的数据流而言，我的设计是否存在根本性缺陷？我应该选择共享服务之类的东西来交换数据吗？

非常感谢任何帮助。

Answer 1

您可以注入private cdRef:ChangeDetectorRef并在ngOnChanges()结束时调用this.cdRef.detectChanges()。这样 Angular 会再次运行变化检测，并且不会抱怨之前修改过的模型值。

class MyComponent {
  constructor(private cdRef:ChangeDetectorRef) {}

  ngOnChanges(changes) {
    this.xxx = ...
    ...
    this.cdRef.detectChanges();
  }
}

Angular2 变化检测 "Expression has changed after it was checked"

Angular2 change detection "Expression has changed after it was checked"

angular

angular2-changedetection