Angular - 内容投影/将异步数据传递给投影内容

Question

我有一个页面主页，其中包含一个名为InfiniteList 的组件。数据以 Observable[] 的形式提供，在 ionViewDidLoad() 中称为 events$ 到 HomePage。然后将events$ 数组传递给无限列表，如下所示：

<infinite-list [content]="events$ | async"></infinite-list>

在无限列表模板中，我使用不同的组件来形成列表：

<event-item *ngFor="let eventItem of content" [eventItem]="eventItem"></event-item>

这是完美的工作。但我不想将event-item 硬连线到infinite-list，这样我就可以将无限列表组件用于不同的子组件（例如事件项、事件项小或其他一些列表）。所以我尝试使用内容投影：

<infinite-list [content]="events$ | async">
    <event-item *ngFor="let eventItem of content" [eventItem]="eventItem"></event-item>
</infinite-list>

我在无限列表组件模板中添加了一个<ng-content></ng-content> 标签，它也可以正常工作。我想我理解内容投影的概念。但是<event-item> 的列表没有被渲染，因为content 在渲染时不知何故不可用。

所以我想我不能说let eventItems of content。就像我会在 infinite-list 组件本身内部一样。

Answer 1

您可以执行以下操作：

在您的 infinite-list 组件装饰器中，添加一个 exportAs 属性。

然后在你的模板中：

<infinite-list #component="valueOfExportAs" [content]="events$ | async">
    <event-item *ngFor="let eventItem of component.content" [eventItem]="eventItem"></event-item>
</infinite-list>

更多信息可以在这里找到：

Article about exportAs

在这篇文章的“模板引用”下可以看到更好的方法：

ng-template, ng-container, ngTemplateOutlet