javascript - angular2中的 `changeDetection: ChangeDetectionStrategy.OnPush`是否只在一个方向上起作用: top->bottom?

Question

考虑这个 plunker

import {Component, OnInit, Input, OnChanges, DoCheck, ChangeDetectionStrategy, EventEmitter} from 'angular2/core'

@Component({
  selector: 'child11',
  template: `
      <button (click)="change_obj()">Button in Child11</button>
      <div>This is child11: {{my_obj11['name']}}</div>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class Child11 {
  @Input()
  my_obj11: Object;

  change_obj(){
    this.my_obj11['name'] = 'some other name';
  }  
}

@Component({
  selector: 'child1',
  template: `
      <child11 [my_obj11]="my_obj1"></child11>
      <div>This is child1: {{my_obj1['name']}}</div>
    `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  directives: [Child11]
})
export class Child1 {
  @Input()
  my_obj1: Object;
}

@Component({
  selector: 'parent',
  template: `
    <div>
      <child1 [my_obj1]="my_obj" ></child1>
      This is my_obj in parent: {{my_obj['name']}}
    </div>
    `,
  directives: [Child1]
})
export class App {
  my_obj: Object = {'name': 'name1'};
}

这里是组件之间的关系

 Parent
   |
 Child1
   |
 Child11

我们注意到 Child1 有 changeDetection: ChangeDetectionStrategy.OnPush

上面的代码非常简单，parent 发送一个对象给child1，它发送完全相同的对象给child11。

child11 然后更新对象的原语。

我们看到 parent 和 child1 的对象都更新了，即使 child1 有 changeDetection: ChangeDetectionStrategy.OnPush

我猜 changeDetection: ChangeDetectionStrategy.OnPush 只能以一种方式工作:从上到下。

这是真的吗？

如果是这样，有什么原因吗？

Answer 1

根据 Savkin's blog post (好吧，它隐藏在对@vivainio 的评论中)，
使用OnPush，Angular 只会在

时检查组件的更改(即检查模板绑定(bind))

• 它的任何输入属性发生变化
• 它触发一个事件(例如，单击按钮)
• 一个 observable 触发一个事件 [请注意，这并不完全正确。 observable 需要使用 | View /模板中的 async 以便运行更改检测。查看关于 this answer 的评论了解更多信息。]

如果满足这些条件中的任何一个，Angular 将还将树上到根组件的所有组件“标记”为需要更改检测。然后它将运行更改检测。所有的祖先组件，即使它们是为 OnPush 策略配置的，都将检查更改，因为它们当前已“标记”。

这解释了为什么 Parent/App 和 Child1 组件的 View 会因组件 Child11 中的事件触发而更新。

---

这种“标记树”功能是设计使然，并且出于您在示例代码中显示的确切原因/场景——即，一个组件更改了一些应用程序数据，并且祖先组件在它们的相同数据中具有数据绑定(bind)意见。 Angular 如何确保 View 得到更新？它必须“标记”直到根组件的所有祖先，以便在运行更改检测时检查所有这些组件。

请注意，这并未涵盖所有情况。假设更改的应用程序数据也存在于组件树的某个其他不相关“分支”的组件 View 中，并且该分支使用 OnPush。该组件 View 将不会更新。