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，这样我就可以将无限列表组件用于不同的子组件（例如 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

更好的方法可以在这篇文章中看到 'Template references':

ng-template, ng-container, ngTemplateOutlet

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

Angular - content projection / passing async data to projected content

javascript

ionic-framework

ngrx