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

Question

我有一个页面主页，它包含一个名为 InfiniteList 的组件.数据以 Observable[] 的形式提供称为 events$至 HomePage在 ionViewDidLoad() 中。然后是 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

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

ng-template, ng-container, ngTemplateOutlet