Блог

Я пытаюсь выполнить простую задачу по передаче данных от родителя к ребенку. Данные представляют собой массив, вложенный в другой массив.

parent.component.html

     <div *ngFor="let parent of parentArray; index as mainIdx" class="main-container" #mainDiv>
      <button (click)="addChild(mainIdx)"><i class="fa fa-plus"></i></button>
      <button (click)="addSibling(mainIdx)"><i class="fa fa-plus"></i></button>
      <button (click)="removeSibling(mainIdx)"><i class="fa fa-minus"></i></button>
      <app-child  *ngFor="let child of parent.childArray" [childData]="parent.childArray"></app- 
      child>
     </div>

 

родительский.компонент.ts

 addChild(parentIndex: number){
  
   let childId: number;
  if(this.parentArray[pIndex].childArray === undefined){
     this.parentArray[pIndex]['childArray'] = [];
     this.parentArray[pIndex].childArray.push({id: 0})
  }
  else{
    childId =  this.parentArray[pIndex].childArray.length;
    this.parentArray[pIndex].childArray.push({id: childId})
  }
 } 
 

дочерний компонент.ts

 @Input() childData: any[];
    
   ngOnInit(): void {
    console.log(this.childData);
  }

   addGrandChild(){
    this.childAdded = true;
  }
 

child.component.html

   <div class="child-container">
    <button (click)="addGrandChild()"><i class="fa fa-plus"></i></button>
    <button (click)="removeChild()"><i class="fa fa-minus"></i></button>
    <app-child *ngIf="childAdded"></app-child>
</div>
 

В основном то, что я пытаюсь здесь сделать, — это создать древовидную структуру для динамически создаваемых детей и внуков. У родителя может быть брат или сестра и могут быть дети, у этих детей могут быть внуки, а у внуков также могут быть дети и так далее. Я могу генерировать компоненты, но я вижу, что никакие данные не передаются от родителя к ребенку.

Используйте ngOnChanges

 ngOnChanges(change: SimpleChanges): void {
  console.log(change.childData.currentValue);
}