以简化的方式,我有一个Angular2组件和一个像这样的输入对象：
class MyObject{
Prop1:string;
Prop2:Number;
}
@Component()
export class MyComponent{
@Input() myObject: MyObject;
DoSomethingIfProp1Change(){
console.log(myObject.Prop1);
}
}
如何检测Prop1是否已从Hostcomponent更改,然后从MyComponent内部执行DoSomethingIfProp1Change方法？
解决方法
实际上,默认情况下,Angular2会在更新对象引用而不是其内容时检测更改.但是,可以使用DoCheck接口更改此默认行为.
在您的情况下(检测到属性已更新到myObject对象中,您可以使用以下方法：
@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');
}
}
更新prop1属性的值时,将调用doSomethingIfProp1Change方法.
看到这个plunkr：http://plnkr.co/edit/uvOKMXQa9Ik8EiIhb60Y?p=preview.
