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

发布时间：2020-12-17 17:16:09 所属栏目：安全来源：网络整理

导读：例如,我有组件： @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 even

例如,我有组件：

@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 + '!';
  }
}

如何在数据更改时调用someEvent()？

解决方法

更改数据时onchanges会被触发.因此,在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 + '!';
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!