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实例处理detectChanges()事件的函数中调用其@Output方法。我担心它的效率不高。我可能会尝试改进它并仅在最后一项事件之后调用它（所有C组件同时发送该事件）但是我会担心事件的异步性和一些意外的行为。 / p>

有没有人知道如何克服这个问题？我的设计在组件之间的数据流方面存在根本缺陷吗？我应该选择像共享服务这样的东西来交换数据吗？

任何帮助都非常感激。

Answer 1

您可以private cdRef:ChangeDetectorRef注入this.cdRef.detectChanges()并在ngOnChanges()结束时致电class MyComponent { constructor(private cdRef:ChangeDetectorRef) {} ngOnChanges(changes) { this.xxx = ... ... this.cdRef.detectChanges(); } }。通过这种方式，Angular再次运行变更检测，并且不会抱怨以前修改过的模型值。

fileUR

Angular2变化检测＆＃34;表达在检查后发生了变化＆＃34;

1 个答案: