Angular2更改检测“表达式在检查后已更改”

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

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

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

在 DEV 模式下，每次@Output在组件 C 中被触发，我在控制台中收到以下错误：

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

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

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

有谁知道如何克服这个问题？我的设计在组件之间的数据流方面是否存在根本缺陷？ 我应该寻求共享服务之类的东西来代替交换数据吗？

非常感谢任何帮助。

你可以注射private cdRef:ChangeDetectorRef并打电话this.cdRef.detectChanges()在......的最后ngOnChanges()。这样，Angular 会再次运行更改检测，并且不会抱怨之前修改的模型值。

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

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