Consider this 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'};
}
Here is the relationship between components
Parent
|
Child1
|
Child11
We note that Child1 have changeDetection: ChangeDetectionStrategy.OnPush
The above code is quite simple, parent send an object to child1 which sends the exact same object to child11.
child11 then update the primitive of the object.
We see that both parent and child1's object is updated even though child1 have changeDetection: ChangeDetectionStrategy.OnPush
I am guessing changeDetection: ChangeDetectionStrategy.OnPush only works one way: top to bottom.
Is that true?
If so is there a reason for this?