为什么changeDetectionStrategy.OnPush在@Input属性更改中没有更新，但更新了@Output触发器属性更改？

Question

考虑这个plunker

Grandchild Component

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

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

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

Child Component

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') 
} 

Parent Component

<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 

，因为我只期望父视图得到更新，因为changeDetection: ChangeDetectionStrategy.OnPush,是配置在子组件这是令人困惑的。

我想我错过了一些东西，有人能指出我的正确方向吗？

谢谢

Answer 1

所有本机事件都标记根组件的路径以进行一次检查。这里在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