Question

我有一个组件可以通过输入从父组件传入一些数据，所以..

main.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

你可以使用一个setter（每次传递的输入值改变时都会调用里面的代码）：

@Input('data')
set data(value: Entry) {
    // do something with incoming data
}

Answer 2

<强>更新：如果您只想设置id，如果首次设置数据，则在OnChanges生命周期挂钩中执行此操作并检查是否已设置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生命周期钩子的参数类型为SimpleChanges。您应该使用它仅对data - 输入的更改作出反应。

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;
}

仅在从@input（Angular 5）收到数据后调用一次函数

2 个答案: