更改检测问题 - 为什么当它与On Push相同的对象引用时会发生变化

Question

我认为在讨论之后我非常清楚角度变化检测是如何工作的:为什么当[值]改变时,变化检测不会发生在这里？

但看看这个插件:https://plnkr.co/edit/jb2k7U3TfV7qX2x1fV4X ? p = preview

@Component({
selector: 'simple',
  template: `
    <div (click)="onClick()">
      {{myData[0].name}}
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class Simple {
  public @Input() myData;
  constructor() {
  }
  public onClick() {

  }
}

点击a,它改为c

据我所知,click事件触发了应用程序级别的更改检测,但[myData] ="testData"仍然引用同一个对象,我使用On Push on Simple,为什么会更改？

Answer 1

这是设计的.

如果你有带OnPush变化检测的组件,那么detectChangesInternal除非发生以下四种情况之一,否则不会触发其功能:

1)其中一个@Inputs变化

〜2.4.x的

〜4.XX

注意: @Input s应该以模板形式呈现.请参阅问题https://github.com/angular/angular/issues/20611并发表评论

2)从组件触发绑定事件(这是你的情况)

注意事项:2.xx和4之间存在一些差异

Angular ChangeDetectionStrategy.OnPush,子组件发出事件

〜2.4.x的

〜4.XX

3)手动标记要检查的组件(ChangeDetectorRef.markForCheck())

4)ChangeDetectorRef.markForCheck()内部异步管道调用

private _updateLatestValue(async: any, value: Object): void {
  if (async === this._obj) {
    this._latestValue = value;
    this._ref.markForCheck();
  }
}

https://github.com/angular/angular/blob/2.4.8/modules/%40angular/common/src/pipes/async_pipe.ts#L137

换句话说,如果您OnPush为组件设置,那么在第一个检查组件的状态将从之后更改CheckOnce为Checked之后,只要我们不更改状态,它就会等待.它将发生在上述三件事之一.

也可以看看:

• https://github.com/angular/angular/issues/11678#issuecomment-247894782

关于angular2变化检测如何工作也有很好的解释:

• https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html
• https://hackernoon.com/everything-you-need-to-know-about-change-detection-in-angular-8006c51d206f

这是解释变化检测的实例(感谢Paskal)onPush.(Comp16看起来像你的组件.你可以点击这个框).