コレクションが変更されるたびに破棄されるTemplateRefアイテム

Question

カスタムObservableとカスタムアイテムTemplateRefに基づいてアイテムのコレクションをレンダリングするコンポーネントの作成に問題があります。

コンポーネントは、入力としてObservableとTemplateRefを取り込み、適切にレンダリングします。この問題は、コレクションが変更され、コレクション内のすべてのアイテムが破棄されて再作成される場合に発生します。

これは明らかに、私がアニメーションに依存してコレクションに出入りするアイテム（またはコレクションの位置を変更するアイテム）を示す場合に問題になります。

代わりに、自分のコンポーネントがコンポーネントを直接レンダリングする場合（すなわち、TemplateRefの入力ではない場合）、コレクションの変更のたびにコンポーネントのこの問題は破棄されません。問題を絞って、*ngForのをテンプレートのアウトレットコンテキストに渡すことができたと思います。

私はhereの問題を再現しました。TemplateRefとコンポーネントを直接レンダリングすることの違いを実証しています。 ngOnDestroyは、コンポーネント:enterが実行されたときのアニメーションと同様にコンソールに記録されます。私はこのplnkrが問題をはっきりと示していると思う。

これについてのお手伝いをいただければ幸いです。

Answer 1

私は、テンプレートアウトレットコンテキストで のアイテムを渡すことに問題を絞り込んでいる可能性があります。

contextパラメータは常に新しいオブジェクト参照を取得しますので、ええ、それはです：

context: { index: index, item: item } 

ので、ngOnChangeフックが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