Angular 2 深度嵌套对象的变化检测

Question

我在 Angular 2 中使用更改检测来观察深层数组中的更改。请看这个plunker...

http://plnkr.co/edit/zcl9pT?p=preview

在不使用 changeDetectionStrategy 的情况下，有没有办法做我正在做的事情？不得不将其注入父组件中似乎有点矫枉过正。我真的只需要它来循环遍历选定过滤器列表的指令。

 @Component({
  selector: 'hello-world',
  templateUrl: 'src/hello_world.html',
  providers: [MyService],
  pipes: [keyValueFilterPipe, ValuesPipe, AsyncPipe],
  directives: [MyDirective, MyDirective2],
  changeDetection: ChangeDetectionStrategy.CheckAlways
})
export class HelloWorld {

    constructor(){}

  }
}

Answer 1

更新：正如@yurzui 所指出的，此错误已在 beta17 中修复。 http://plnkr.co/edit/SwbjKn2M9NBBOYD29IML?p=preview

相关公关：https://github.com/angular/angular/commit/42231f5

它允许所有合法程序处于开发模式。

checkNoChanges 函数仅比较基本类型的相等性，并深入比较可迭代对象。其他对象不能导致 checkNoChanges 抛出。这意味着开发模式在给定合法程序的情况下永远不会失败，但可能会允许一些非法程序。

---

原答案

问题在于管道的实现。每次keyValueFilterPipe 返回一个新的 JavaScript 对象，这与同一过滤器返回的最后一个对象不同。 Angular 认为这是您的代码中的一个错误并且停止工作。

您可以在控制台中看到报告的错误，例如... has changed after it was checked。不仅您的指令停止工作，正常的文本绑定也会中断。

开发模式下的 Angular2 将尝试找出在“脏检查”期间发生了什么变化。因此，如果开发人员错误地将循环调用放入模板中，Angular 会报告这一点。

这是 Angular2 中的一个特性。但它伤害了你。

解决方法很简单。要么像你一样改变检测策略。或致电enableProd 取消警告。或者实现总是返回一个固定对象的keyValueFilter（例如WeakMap）

---

另见

http://www.bennadel.com/blog/3040-i-have-a-fundamental-misunderstanding-of-change-detection-in-angular-2-beta-8.htm

还有 Angular 的原始问题，尤其是这条评论

https://github.com/angular/angular/issues/5918#issuecomment-167422071