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项目中的每个项目？

Answer 1

您不能直接渲染QueryList返回的ContentChildren，但是如果每个项目都有自己的引用ng-template，则可以使用*ngTemplateOutlet进行渲染。

Full example at 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>

在模板中渲染QueryList的元素

1 个答案: