子组件输入属性是否在 ngOnInit 之前解析？

Question

I have a parent component that is creating three identical child components. The children have an input that corresponds to some autocomplete data formatted as an array. However when I attempt to populate the array in the parent's ngOnInit and then pass it to one of the children, the child receives undefined as the array instance. If I try passing null as the input the same thing happens.

I'm just wondering if the lifecycle is causing this and I should use ngAfterInit or something else instead?

Parent component

<app-alert-chip-list [autocompleteData]="targetGroupAutocomplete"></app-alert-chip-list>
<app-alert-chip-list [fArray]="alertContacts" [autocompleteData]="null"></app-alert-chip-list>
...

ngOnInit() {
    this.targetGroupAutocomplete = ['This is the first autocomplete', 'This is a second sentence that is a longer sentence than the first autocomplete', 'This'];
  }

Child component

@Input() fArray: FormArray;
  @Input() autocompleteData: string[];

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    if(this.autocompleteData && this.autocompleteData.length != 0) {
      this.usesAutocomplete = true;
    }
    console.log("AC:", this.autocompleteData); //Ends up printing undefined
  }

Answer 1

you need to watch your child inputs changes through ngOnchanges

ngOnChanges(changes: SimpleChanges): void {
    for (let propName in changes) {
      let change = changes[propName];
      if (propName === "YOUR_INPUT_NAME") {
        this.YOUR_INPUT_NAME = (change.currentValue);
          // you can add whatever logic that to be executed. depend on which input is changed 
      }
    }
  }

Answer 2

I suggest another approach: use "setters" in your input:

private _autoCompleteData: string[]; //declare a a private variable

@Input() fArray: FormArray;

@Input() set autocompleteData(value) {
  this._autoCompleteData = value; //equal the variable

  if(value && value.length != 0) { //another code that it's relationated with autoCompleteData
    this.usesAutocomplete = true;
    console.log("AC:", this.autocompleteData); //Ends up printing undefined
  }
}

get autoCompleteData() {
  return this._autoCompleteData
}