Как использовать вложенный компонент в l oop Angular?

Question

У меня есть следующая структура JSON, которую я хочу показать с помощью компонента:

const rootBlock = {
   id: 1,
   fields: [],
   blocks: [{
      id: 2,
      fields: []
      blocks: []
   }]
} as Block;

Есть компонент BlockComponent.

@Input() block: Block;

Я хочу показать все вложенные компонент внутри одного, как это сделать с помощью проекции?

<app-block>
   <app-block></app-block>
</app-block>

Answer 1

В вашем компоненте app-block сохраните выход ng-content

block.component. html

<h2>Some text</h2>
<ng-content></ng-content>

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

Обновление:

block.component.ts

@Input() block: Block;

block.component. html

<div class="block">
  <div> 
    id: {{block.id}}
  </div>
  <ng-container *ngIf="block?.blocks?.length">
    <div class="nestedBlocks" *ngFor="let eachBLock of block.blocks">
       <app-block [block]="eachBLock"></app-block>
    </div>
  </ng-container>
</div>

app.component. html

<app-block [block]="rootBlock"></app-block>