angular - TemplateRef 项目每次集合更改时都会被销毁

Question

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

该组件将 Observable 和 TemplateRef 作为输入并适本地呈现它们。问题出在集合发生变化并且集合中的所有项目都被销毁并重新创建的地方。

这显然是有问题的，因为我依靠动画来指示项目进入和离开集合(或改变集合中的位置)。

如果我的组件直接渲染组件(即不是 TemplateRef 输入)，我不会遇到每次集合更改时组件都被销毁的问题。我想我可能已经将问题缩小到在模板导出上下文中从 *ngFor 传递 item。

我有问题的重现 here演示直接呈现 TemplateRef 和组件之间的区别。 ngOnDestroy 以及组件 :enter 时的动画记录到控制台。我认为这个 plnkr 清楚地展示了这个问题。

如有任何帮助，我们将不胜感激。

Answer 1

I think I may have narrowed the problem down to passing the item from the *ngFor on the templates outlet context.

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

context: { index: index, item: item }

因此 ngOnChange Hook 将在 ngTemplateOutletDirective 中调用:

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

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

<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>

Forked Plunker

另见

• ngTemplateOutlet prevents directive from working correctly