Angular 在模板中呈现QueryList的元素

我有两个部分： 项目列表和项目

我这样使用它们：

<items-list items="items"></items-list>

<ngx-carousel>
 <ngx-item *ngFor="let item of items">
   <item data="item"></item>
 </ngx-item>
</ngx-carousel>

<items-list>
 <item data="dataForFirstItem"></item>
 <item data="dataForSecondItem"></item>
</items-list>

在内部级别上，项目列表如下所示：

<items-list items="items"></items-list>

<ngx-carousel>
 <ngx-item *ngFor="let item of items">
   <item data="item"></item>
 </ngx-item>
</ngx-carousel>

<items-list>
 <item data="dataForFirstItem"></item>
 <item data="dataForSecondItem"></item>
</items-list>

然而，这种方法并不灵活，因为我应该使用一些“items”数组来填充项

我想做的是重做这种方法：

<items-list items="items"></items-list>

<ngx-carousel>
 <ngx-item *ngFor="let item of items">
   <item data="item"></item>
 </ngx-item>
</ngx-carousel>

<items-list>
 <item data="dataForFirstItem"></item>
 <item data="dataForSecondItem"></item>
</items-list>

但这里的问题是，我不知道如何重做项目列表的实现：

<ngx-carousel>
 <ngx-item *ngFor="let item of items">
  <!-- each item should be rendered here -->
 </ngx-item>
</ngx-carousel>

ngx项目要求将组件放置在内部

---

我使用ContentChildren捕获QueryList中的所有渲染项组件。但是如何呈现ngx项中的每个项呢？

您不能直接呈现由

ContentChildren

返回的

QueryList

，但是如果每个项都有自己的

ng模板的引用，则可以使用


//itemsList.component.ts
从'@angular/core'导入{QueryList，ViewChildren，Component，ContentChildren}
从“./Item.component”导入{Item}
@组成部分({
选择器：“项目列表”，
模板：`
项目清单：




`
})
导出类项目列表{
@ContentChildren（项目）
项目：查询列表
}

//item.component.ts
从'@angular/core'导入{Component，ViewChild，TemplateRef，Input}
@组成部分({
选择器：'项目'，
模板：`项目数据：{{itemData}}`
})
导出类项目{
@输入（）
项目数据：编号
@ViewChild（'itemTemplate'）
模板：TemplateRef
}

//app.component.html
您不能查询元素，然后在其他地方渲染它们。而是传递一个
并使用
ngTemplateOutlet