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

发布于12月16日

我有一个指令，上面有一个@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将触发.如果设置类上的任何其他属性发生更改，则不会触发.

如何检测设置中的任何属性是否发生了更改？

推荐答案

Angular 仅会注意到对象是否已更改为其他对象(即，对象引用已更改)，因此ngOnChanges()不能用于解决您的问题.有关详细信息，请参见Victor Savkin's blog post.

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

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

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