如何知道ngOnChanges中哪些@Input更改?

时间:2016-05-24 03:55:26

标签: typescript angular

我正在使用Angular 2。

现在我有两个@input aabb。我想这样做:

  1. 如果aa发生变化,请执行某些操作。
  2. 如果bb发生变化,请执行其他操作。
  3. 如何知道ngOnChanges中哪些@Input更改?感谢

      @Input() aa;
      @Input() bb;
    
      ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        // if aa changes, do something
        // if bb changes, do other thing
      }
    

1 个答案:

答案 0 :(得分:14)

可以这样做

ngOnChanges(changes: { [propName: string]: SimpleChange }) {
  if( changes['aa'] && changes['aa'].previousValue != changes['aa'].currentValue ) {
    // aa prop changed
  }
  if( changes['bb'] && changes['bb'].previousValue != changes['bb'].currentValue ) {
    // bb prop changed
  }
}

但我很惊讶未定义的属性已被定义。从食谱中,我预计只会定义更改的属性。

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-on-changes

如果这太冗长,您也可以尝试使用setter方法:

_aa: string;
_bb: string;

@Input() set aa(value: string) {
  this._aa = value;
  // do something on 'aa' change
}

@Input() set bb(value: string) {
  this._bb = value;
  // do something on 'bb' change
}

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter