javascript - 仅在从@input接收到数据后调用函数一次(Angular 5)

Question

我有一个组件，它通过输入从父组件获取一些数据，因此..

ma​​in.component.ts

<app-sidebar [data]="programData"></app-sidebar>

然后在我的

sidebar.component.ts

@Input() data: Entry<any>;

现在，该数据在其响应中具有唯一的 id，并且该 id 用作另一个函数中的参数，该函数调用一些数据，然后填充我页面上的元素，因此我能够通过放置该函数来使其工作在 ngOnChanges 中，但显然每次发生变化时它都会调用该函数..有没有办法调用函数，但只有在我收到来自 Input() data 的数据之后？

我当前的设置如下:

 ngOnChanges() {
    this.id = this.data.fields.id; // sets the id from the @input() data
    this.getElements(this.id); //gets the other data using the passed in id
 }

编辑

澄清一下，我只想第一次设置 this.id，而不是每次数据更改时设置，传入的数据来自 api，因此您必须允许数据第一时间到达

谢谢

Answer 1

更新:如果您只想在第一次设置数据时设置 id，则可以在 OnChanges 生命周期 Hook 中执行此操作，并检查 id 是否已设置:

ngOnChanges(changes: SimpleChanges) {
  if(changes.data && changes.data.currentValue) {
    const fields= changes.data.currentValue.fields;
    if(fields && (fields.id || fields.id === 0) && (!this.id && this.id !== 0)) {
      this.id = data.fields.id;
      this.getElements(this.id);
    }  
  }
}

以防万一，如果您只想在 id 更改时设置 id，请使用:

ngOnChanges(changes: SimpleChanges) {
  if(changes.data && changes.data.currentValue) {
    const fields= changes.data.currentValue.fields;
    if(fields && (fields.id || fields.id === 0) && fields.id !== this.id) {
      this.id = fields.id;
      this.getElements(this.id);
    }  
  }
}

<小时/>

OnChanges生命周期钩子(Hook)有一个类型为 SimpleChanges 的参数。您应该使用它仅对数据输入的更改使用react。

ngOnChanges(changes: SimpleChanges) {
  if(changes.data && changes.data.currentValue) {
    const data = changes.data.currentValue;
    this.id = data.fields.id;
    this.getElements(this.id);
  }
}

或者作为替代方案，您可以使用 setter 作为输入:

private _data: Entry<any>;

@Input()
set data(value: Entry<any>) {
  this._data = value;
  this.id = value.fields.id;
  this.getElements(this.id);
}

get data() {
  return this._data;
}