如何将 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>

这会创建如下内容：

我的问题是，如何将网格 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 并通过列表items 到 @Input()，但由于组件类型发生变化，我有点困惑！

感谢任何help/insight！

Answer 1

ng-content 指令允许在另一个组件中动态插入组件和 HTML 内容。 This article Angular 大学在 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。

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

How to wrap an Angular component around a dynamic component

angular-components

angular