Javascript 仅在从@input（角度5）接收数据后调用函数一次

我有一个组件，它通过一个输入从父组件获得一些数据，所以

main.component.ts

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

@Input() data: Entry<any>;

编辑

为了澄清，我只想在第一次设置

this.id

，而不是每次数据更改时，传入的数据都来自api，因此您必须允许数据第一次传入

---

谢谢

您可以为此使用setter（每次传递的输入值发生更改时都会调用其中的代码）：

---

您可以为此使用setter（每次传递的输入值发生更改时都会调用其中的代码）：

更新： 如果只想在第一次设置数据时设置

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

---

生命周期挂钩具有类型为的参数。您应该使用它仅对

数据

-输入的更改作出反应

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

private\u数据：输入；
@输入（）
设置数据（值：输入）{
这个。_数据=值；
this.id=value.fields.id；
this.getElements（this.id）；
}
获取数据（）{
返回此。\u数据；
}

更新： 如果只想在第一次设置数据时设置

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

---

生命周期挂钩具有类型为的参数。您应该使用它仅对

数据

-输入的更改作出反应

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

private\u数据：输入；
@输入（）
设置数据（值：输入）{
这个。_数据=值；
this.id=value.fields.id；
this.getElements（this.id）；
}
获取数据（）{
返回此。\u数据；
}

我遇到的问题是，数据中的数据确实发生了变化，我只想在第一次设置id，然后当数据发生变化时，id没有发生变化。您在问题中没有说明，我将更新我的答案。您更新的答案不起作用，因为只有在视图初始化之后才收到输入数据。您也没有提到组件初始化后数据将不可用。但好吧，我会再次更新它，并检查id是否为零以通过它，因为

！如果id是
0
，那么这个.id将是
true
。我的问题是，数据中的数据确实发生了变化，我只想在第一次设置id，然后当数据发生变化时，id没有发生变化。您在问题中没有说明，我将更新我的答案。您更新的答案不起作用，因为只有在视图初始化之后才收到输入数据。您也没有提到组件初始化后数据将不可用。但好吧，我会再次更新它，并检查id是否为零以通过它，因为
！如果id是
0
我的问题是数据确实发生了变化，我只想在数据第一次进入时设置id，而不是在数据发生变化时设置id。我的问题是数据确实发生了变化，我只想在数据第一次进入时设置id，而不是在数据发生变化时设置id