typescript – 检测组件输入的嵌套属性的更改

发布时间：2020-12-17 17:54:07 所属栏目：安全来源：网络整理

导读：以简化的方式,我有一个Angular2组件和一个像这样的输入对象： class MyObject{ Prop1:string; Prop2:Number;} @Component() export class MyComponent{ @Input() myObject: MyObject; DoSomethingIfProp1Change(){ console.log(myObject.Prop1); }} 如何检测

以简化的方式,我有一个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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!