angular - 在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's blog post获取更多信息。

你可以实现 ngDoCheck() MyDirective 类中的方法。 “每次检查组件或指令的输入属性时，都会调用该生命周期 Hook 。使用它通过执行自定义检查来扩展更改检测。”

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

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