在模板中渲染 QueryList 的元素

Question

我有两个组件： 项目列表和项目

我这样使用它们：

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

在内部级别的项目列表看起来像这样：

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

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

我想做的是像这样重新设计方法：

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

但这里的问题是我不明白如何重新设计items-list的实现：

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

ngx-item 需要将组件放置在里面。

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

Answer 1

您无法直接渲染QueryList返回的ContentChildren，但如果每个项目都有其自己的引用ng-template，则可以使用 渲染它*ngTemplateOutlet。

Stackblitz 上的完整示例。

//itemsList.component.ts
import {QueryList, ViewChildren, Component, ContentChildren} from '@angular/core'
import {Item} from './item.component'

@Component({
  selector: 'items-list',
  template: `
    List of items:
    <ul>
      <li *ngFor='let item of items'>
        <ng-container *ngTemplateOutlet='item.template'></ng-container>
      </li>
    </ul>
  `
})
export class ItemsList {
  @ContentChildren(Item)
  items: QueryList<Item>
}

//item.component.ts
import {Component, ViewChild, TemplateRef, Input} from '@angular/core'

@Component({
  selector: 'item',
  template: `<ng-template #itemTemplate>Item data: {{itemData}}</ng-template>`
})
export class Item {
  @Input()
  itemData: number
  @ViewChild('itemTemplate')
  template: TemplateRef<any>
}

//app.component.html
<items-list>
  <item [itemData]='1'></item>
  <item [itemData]='2'></item>
</items-list>