javascript - 为什么 changeDetectionStrategy.OnPush 在@Input 属性变化时不更新，而更新@Output 触发属性变化？

Question

考虑这个 plunker

孙组件

<button (click)="back2click()"></button>

@Input() from2;
@Output()
back2 = new EventEmitter<any>();

back2click() {
   this.back2.emit('hi');
}

子组件

changeDetection: ChangeDetectionStrategy.OnPush,

<my-app-n2 [from2]="from1" (back2)="handleback2($event)"></my-app-n2>

@Input() from1;
@Output() back1 = new EventEmitter<any>();

handleback2() {
    this.back1.emit('hi')
}

父组件

<my-app-n1 [from1]="from" (back1)="handleback1($event)"></my-app-n1>
handleback1 () {
    this.from.name = 'handline4';
}

我看到当 button 被点击时

back2click -> emit -> handleback2 -> emit -> handleback1 
    -> attribute is updated -> all child view are updated

这令人困惑，因为我希望只有父 View 得到更新，因为 changeDetection: ChangeDetectionStrategy.OnPush, 是子组件中的配置。

我想我错过了什么，有人能给我指明正确的方向吗？

谢谢

Answer 1

所有的native events都会标记到根组件的路径进行一次check。在 Grandchild Component 的模板中，您使用的是原生 click 事件:

<button (click)="back2click()"></button>

因此组件的层次结构被标记为检查一次。

   Root Component -> ViewState.ChecksEnabled = true
     |
    ...
     |
   Parent  -> ViewState.ChecksEnabled = true
     |
     |
   Child  (onPush)  -> ViewState.ChecksEnabled = true
     |
     |
   Grand child (event triggered here) -> markForCheck() -> ViewState.ChecksEnabled = true

有关更改检测的最全面解释，请阅读:

• Everything you need to know about change detection in Angular

要了解有关 markForCheck 的更多信息，请参阅 this answer 并阅读这篇文章:

• If you think ngDoCheck means your component is being checked — read this article