如何将一个组件嵌套到另一个组件中？

Question

现在在主要组件中我进行迭代 items = [1,2,3]:

<ng-content *ngFor="item in items">
   <app-form [item]="item"></app-form>
</ng-content>

结果我得到这个：

 <app-form [item]="item" type="1"></app-form>
 <app-form [item]="item" type="2"></app-form>
 <app-form [item]="item" type="3"></app-form>

如何更好地重建DOM并使组件嵌套？

例如在<app-form [item]="item" type="2"></app-form>中插入<app-form [item]="item" type="1"></app-form>?

我应该在循环步骤中执行此操作还是我可以操纵就绪 DOM 并重建它？

我需要专业的建议，谢谢！

Answer 1

Content Projection 将满足您的需求。可以使用 <ng-content>.

访问嵌套在组件选择器标签内的任何内容

应用-form.component.html

<h1>App Form!</h1>
<ng-content></ng-content>

app.component.html

<app-form>
  <app-form></app-form>
</app-form>

这个示例代码实际上只会渲染

App Form!
App Form!

How to nested one component into another?