angular - 如何在自定义组件中转换输入数据？

Question

例如，我有组件:

@Component({
  selector: 'my-selector',
  inputs: ['data'],
  moduleId: module.id,
  template: '<p>{{transformedData}}</p>'
})
export class MyComponent {
  public transformedData: string;
  @Input() public data: string;

  // How to call this event on "data" change?
  public someEvent() {
    this.transformedData = this.data + '!';
  }
}

如何在 data 变化时调用 someEvent()？

Answer 1

onchanges 将在 data 更改时触发。因此，在 onChanges 中，您可以调用 someEvent 函数。

export class MyComponent {
  public transformedData: string;
  @Input() public data: string;

  ___________________________________________________________________________________________
  // EDIT: you can also do it. Not necessary but can be done this way too.
 //  Note: If you go with this approach, you don't need to use onchanges hook and don't require above @Input public data line.
    @Input() set data(data:string)
           console.log(data);
           this.someEvent();
   }
 ____________________________________________________________________________________________ 


  ngOnChanges(...args: any[]) {

        console.log(args);
        this.someEvent();
  }

  // How to call this event on "data" change?
  public someEvent() {
    this.transformedData = this.data + '!';
  }
}