在angular2中,如何在为@Input发送的对象上更改属性的onChanges

Question

我有一个指令,它是一个@Input接受一个类.

@Directive({selector: 'my-directive'})
@View({directives: [CORE_DIRECTIVES]})
export class MyDirective  {
    @Input() inputSettings : SettingsClass;
    @Input() count : number;

   onChanges(map) {
      console.log('onChanges');
    }
}

该指令用于html:

  ...
  <my-directive [input-settings]="settings" [count]="settings.count"></my-directive>
  ...

如果settings.count已更改,onChanges则会触发.如果设置类中的任何其他属性发生更改,则不会触发.

如何检测设置中的任何属性是否有变化？

Answer 1

Angular只会注意到对象是否已更改为其他对象(即对象引用已更改),因此ngOnChanges()无法用于解决您的问题.有关更多信息,请参阅Victor Savkin的博客文章.

您可以ngDoCheck()在MyDirective类中实现该方法.每次检查组件或指令的输入属性时,都会调用该生命周期钩子.通过执行自定义检查,可以使用它来扩展更改检测."

要实现自定义检查方法,首先需要.equals()在类上实现一个方法,SettingsClass这样就可以编写如下代码ngDoCheck():

ngDoCheck() {
   if(!this.inputSettings.equals(this.previousInputSettings)) {
      // inputSettings changed
      // some logic here to react to the change
      this.previousInputSettings = this.inputSettings;
   }
}