Angular 包装器组件迭代子级

Question

我正在尝试在 Angular 中创建一个包装器组件，该组件可以接收任意数量的子组件，然后将每个项目一个一个地包装起来。 最好完全动态地不绑定任何额外的数据。

app-wrapper.component应该像这样工作（只处理包装器的逻辑） ：

<div class="wrapper">
   <div 
      class="child-wrapper"
      *ngFor="let child of children"
   >
      <ng-content [select]="child"></ng-content>
   </div>
</div>

并使用应用程序包装器（为项目处理逻辑的地方） ：

<app-wrapper>
   <app-first-item></app-first-item>
   <app-second-item></app-second-item>
   ...
   <app-last-item></app-last-item>
</app-wrapper>

app-wrapper.component不能这样工作，会引发错误：

错误：模板解析错误：无法绑定到“选择”，因为它不是“ng-content”的已知属性。

请注意： div.wrapper和div.child-wrapper不能分开。

Answer 1

似乎有几种可能性可以做到这一点。

1/ 你可以把它们做成组件：

应用程序包装器组件：

<div class="wrapper">
  <div 
    class="child-wrapper"
    *ngFor="let child of children"
   >
    <app-item [item]="child"></app-item>
  </div>
</div>

并使用 @Input 创建 ItemComponent 以显示项目。

2/ 您可以使用 ngTemplateOutlet 指令 app-wrapper.component 创建模板引用：

<div class="wrapper">
   <div 
      class="child-wrapper"
      *ngFor="let child of children"
   >
    <ng-container *ngTemplateOutlet="test; context: { child: child }"></ng-container>
   </div>
</div>

<ng-template #test let-child="child">
<!-- here an item -->
</ng-template>

ng-content 用于在元素内注入内容，如下所示：

在您的应用程序包装器中：

<div class="wrapper">
      <ng-content select="[child]"></ng-content>
</div>

当你调用你的组件时：

  <app-wrapper>
    <div child>element you want to put inside the "ng-content" </div>
 </app-wrapper>