In fact, by default Angular2 detects changes when object reference is updated not its content. But this default behavior can be changed by using the DoCheck
interface.
In your case (detecting that a property was updated into the myObject
object, you could use the following approach:
@Component({
selector: 'my-component',
(...)
})
export class MyComponent implements DoCheck {
@Input() myObject: MyObject;
differ: any;
constructor(differs: KeyValueDiffers) {
this.differ = differs.find([]).create(null);
}
ngDoCheck() {
var changes = this.differ.diff(this.myObject);
if (changes) {
changes.forEachChangedItem((elt) => {
if (elt.key === 'prop1') {
this.doSomethingIfProp1Change();
}
});
}
}
doSomethingIfProp1Change() {
console.log('doSomethingIfProp1Change');
}
}
When the value of the prop1
property is updated, the doSomethingIfProp1Change
method is called.
See this plunkr: http://plnkr.co/edit/uvOKMXQa9Ik8EiIhb60Y?p=preview.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…