typescript - 如何知道 ngOnChanges 中的哪些 @Input 变化?

标签 typescript angular

我正在使用 Angular 2。

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

  1. 如果 aa 改变了,就做点什么。
  2. 如果 bb 发生变化,则执行其他操作。

如何知道 ngOnChanges 中哪些@Input 发生了变化?谢谢

  @Input() aa;
  @Input() bb;

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

最佳答案

也许可以这样做

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

关于typescript - 如何知道 ngOnChanges 中的哪些 @Input 变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37404107/

相关文章:

javascript - 将 "this"存储在 TypeScript 类中(或以其他方式维护)

typescript - VSCODE 任务 typescript TS5042 内部版本 : Option 'project' cannot be mixed with source files on a command line

angular - 学习有 Angular Dart 并使用有 Angular 画廊部分库

javascript - ionic 2 : How do you reinstantiate @ViewChild if you dismiss the view?

angular2 - 用户活跃和空闲

javascript - Angular 中的字体和图标冲突

javascript - Yammer REST API - 使用换行符发布到 messages.json

typescript - RxJS6 : reset stream after completion

javascript - 在应用程序或组件加载 Angular 7 之前运行服务

Angular2 子组件