Question

我在创建基于自定义Observable和自定义项TemplateRef呈现项目集合的组件时遇到问题。

该组件将Observable和TemplateRef作为输入并适当地呈现它们。问题出现在集合更改的位置，集合中的所有项目都被销毁并重新创建。

这显然是有问题的，我依赖动画来指示进入和离开集合的项目（或更改集合中的位置）。

如果我的组件直接呈现组件（即不是TemplateRef输入），则每次集合更改时都不会销毁此组件问题。我想我可能已经将问题缩小到从模板出口上下文的item传递*ngFor。

我已经复制了问题here，证明了直接渲染TemplateRef和组件之间的区别。 ngOnDestroy将记录到控制台以及组件:enter的动画时间。我认为这个plnkr清楚地证明了这个问题。

对此有任何帮助将不胜感激。

Answer 1

我想我可能已经将问题缩小到传递项目了模板出口上下文中的* ngFor。

是的，那是因为context参数总是获得新的对象引用：

context: { index: index, item: item }

因此会在ngOnChange内调用ngTemplateOutletDirective挂钩：

如上图所示，模板将被删除。

为避免这种情况，我建议您在@Input() ngForTemplate上使用内置ngFor属性：

<div *ngFor="let item of items; template: itemTemplate, trackBy: itemTrack"></div>

以及#feedItem自定义模板更改let-item变量：

<ng-template #feedItem let-item="item">

为：

<ng-template #feedItem let-item="$implicit">

或简单地说：

<ng-template #feedItem let-item>

另见