Question

我有一个列表组件，该组件应根据一些规则来管理其列表元素。一些列表元素必须多次渲染，而其他元素则根本不能渲染。我做了一个最小的案例来说明问题：

import { Component, QueryList, ContentChildren, ViewChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'list-item',
  template: `
    <ng-template>
      <ng-content></ng-content>
    </ng-template>`
})
export class ListItemDirective {
  @ViewChild(TemplateRef) content;
}

@Component({
  selector: 'list',
  template: `
    <ng-container *ngTemplateOutlet="contentChildren.toArray()[0].content"></ng-container>
    <div>Here could come some other components</div>
    <ng-container *ngTemplateOutlet="contentChildren.toArray()[0].content"></ng-container>
   `,
})
export class ListComponent {
  @ContentChildren(ListItemDirective) contentChildren: QueryList<ListItemDirective>;
}

这就是它的用法。基本思想是，我得到了一个同构或异类组件的列表，并且该列表的职责是决定何时以及为什么应该或不应该渲染每个组件。（而且，某些元素必须多次渲染。

<list>
    <list-item *ngFor="let clip of clips">
      <card (click)="open(clip)">
        <video-card [clip]="clip"></video-card>
      </card>
    </list-item>
  </list>

我现在面临的问题是，在这种特殊情况下，即使在列表模板中有两次剪辑也只能渲染一次。为什么会这样？

Angular7多次渲染相同内容的子对象似乎不起作用

0 个答案: