追加要素がある無限スクロールangle2

Question

リストの内容全体を実現する代わりに、新しい要素を追加する可能性のある無限スクロールを実装したいと思います。

現在、私はng-infinite-scrollで試していますが、毎回ngForを使用した結果、全体のリストが最初からレンダリングされます。要素が（容認できない遅延につながるもの）、それらのデータをフェッチすることを引き起こす

<div style="width: 750px;"> 
<div class="posts-list" 
infinite-scroll 
[infiniteScrollDistance]="2" 
[infiniteScrollThrottle]="300" 
(scrolled)="onScrollDown()"> 
    <post-component *ngFor="let item of array" [dataHref]="item"></post-component> 
</div>  

ようなアプローチ。私はルーターモジュールの子コンポーネントを使ってそのようなことを実現することが可能かどうかを考えました（しかし、これは私が投稿の有限リストを持っていないので悪いです）。

既にレンダリングされたものを繰り返さずに新しい要素を追加する方法はありますか？

Answer 1

無限スクロールを作成する1つの方法は、次のとおりです。

1 - ターゲットdivにスクロールイベントを追加します。 （スクロールイベントを追跡し、条件が満たされたとき、ポスト・コンポーネントを作成します。） 2 - （DOMでテンプレートを注入するために）あなたのdivの内側に

HTML

<div style="width: 750px;"> 
    <div class="posts-list"(scroll)="onScroll($event)"> 
     <ng-template #post></ng-template> 
    </div> 
</div> 

をngのテンプレートを追加します。あなたのTSファイルは、あなたが（あなたのターゲットのdivの例えば80％）

TS

スクロールを持っているときに動的条件に基づいてコンポーネントを作成する機能を追加します

@ViewChild('post') element: ElementRef; 

constructor(private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver){} 

onScroll($event): void { 
    // apply condition eg. when 80 % of div is scrolled 
    if(conditionIsMet){ 
    this.loadPostComponent(); 
    } 
} 

loadPostComponent() { 
    let postComponent = this.componentFactoryResolver.resolveComponentFactory(PostComponent); 
    let componentRef = this.element.createComponent(postComponent); 
    (<PostComponent>componentRef.instance).data = post.data; 
} 

希望はあなたを助けます。