投影コンテンツへの角度コンテンツ投影/非同期データの受け渡し

Question

InfiniteListというコンポーネントを保持しているページホームページがあります。データは、ionViewDidLoad（）のevents$〜HomePageと呼ばれる形式のObservable[]で提供されます。私はリストを形成するために、さまざまなコンポーネントを使用しています無限リストテンプレートで

<infinite-list [content]="events$ | async"></infinite-list> 

：完璧に働いている

<event-item *ngFor="let eventItem of content" [eventItem]="eventItem"></event-item> 

その後、events$配列は、このような無限のリストに渡されます。 event-itemをinfinite-listにハードワイヤしたくないので、さまざまな子コンポーネント（イベント項目、イベント項目小、または他のリストなど）に無限リストコンポーネントを使用できるようにします。私は同様に動作している無限リストコンポーネントテンプレートに<ng-content></ng-content>タグを追加した

<infinite-list [content]="events$ | async"> 
    <event-item *ngFor="let eventItem of content" [eventItem]="eventItem"></event-item> 
</infinite-list> 

：私はコンテンツの投影を使用することを試みました。私はコンテンツ投影の概念を理解していると思います。レンダリングの瞬間にcontentが何らかの形で利用できないため、<event-item>のリストはレンダリングされていません。

だから私はlet eventItems of contentと言うことはできません。私はそれがinfinite-listコンポーネントの内部にあったと思います。

Answer 1

次の操作を行うことができます：あなたのinfinite-listコンポーネントデコレータで

exportAsプロパティを追加します。あなたのテンプレートで次に

：

<infinite-list #component="valueOfExportAs" [content]="events$ | async"> 
    <event-item *ngFor="let eventItem of component.content" [eventItem]="eventItem"></event-item> 
</infinite-list> 

詳しい情報はここで見つけることができます：

Article about exportAs

アンでも良い方法は、 'テンプレートの参照' の下で、この記事で見ることができます。

ng-template, ng-container, ngTemplateOutlet