如何在动态组件周围包裹Angular组件

Question

我有一个需要针对许多不同类型的列表进行水平滚动的应用。这是一个音乐应用程序，因此我可以水平滚动专辑图像，特色图像等。我已经生成了一些html，可以为专辑列表创建水平滚动，例如：

<div class="hs-grid">
  <div class="hs full"">
      <app-album-item *ngFor="let releaseEl of releases" [submission]="releaseEl"></app-album-item>
  </div>
</div>

哪个创建了这样的内容：

我的问题是，如何将Grid html转换为组件，这样我就不必为每种不同类型的水平滚动项目复制网格代码。本质上类似：

<app-horizontal-scroll-grid>
    <app-album-item *ngFor="let releaseEl of releases" [submission]="releaseEl"></app-album-item>
    <!-- IT CAN ALSO BE FEATURED ITEMS -->
    <app-featured-item *ngFor="let featuredItem of featured" [featuredItem]="featuredItem"></app-featured-item>
</app-horizontal-scroll-grid>

显然这行不通...

我应该如何通过horizontal-grid-component内部使用的项目列表，因为它可以是不同的组件类型，例如：

• app-album-item
• app-featured-item
• 等？

[我知道，如果我只有一种类型的组件需要水平滚动，我可以将app-album-item放置在horizontal-scroll-grid组件HTML内，然后将项目列表传递到@Input()，但是由于类型组件更改，我有点困惑！

感谢您的帮助/了解！

Answer 1

ng-content指令允许在另一个组件内部动态插入组件和HTML内容。 Angular University的This article提供了有关Angular中内容投影的更多详细信息。

您可以将“ scroller”组件模板定义为：

<div class="hs-grid">
  <div class="hs full"">
    <ng-content></ng-content>
  </div>
</div>

并且在父组件模板的滚动器内部包括其他组件：

<app-horizontal-scroll-grid>
  <app-album-item *ngFor="let releaseEl of releases" ...></app-album-item>
</app-horizontal-scroll-grid>

请参见this stackblitz以获取演示。