TemplateRef項目在每次收集更改時被銷燬

Question

我在創建基於自定義Observable和自定義項目TemplateRef呈現項目集合的組件時出現問題。

該組件以Observable和TemplateRef作爲輸入並適當地呈現它們。問題出在集合更改的位置，集合中的所有項目都被銷燬並重新創建。

這顯然是有問題的，我依靠動畫來指示進入和離開集合的物品（或在集合中變化的位置）。

如果我的組件直接渲染組件（即不是TemplateRef輸入），那麼每次收集更改時都不會有組件被破壞的問題。我想我可能已經將問題縮小到從模板出口上下文中的*ngFor傳遞item。

我已經複製了問題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> 

Forked Plunker

參見

• ngTemplateOutlet prevents directive from working correctly