Question

我有一个页面主页，其中包含一个名为InfiniteList的组件。在ionViewDidLoad（）中，数据以Observable[] 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，以便我可以将无限列表组件用于不同的子组件（例如event-item，event-item-small，或其他一些清单）。所以我试图使用内容投影：

<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

在本文的“模板引用＆＃39;

”下可以看到更好的方法

ng-template, ng-container, ngTemplateOutlet

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

1 个答案: