角2スクロールダウン関数の呼び出しmore

Question

角度2 divの高さは1000pxです。loadmore関数を呼び出して800pxに到達するまでスクロールします。

<div class="row" style="margin:0px 0px;height:1000px; overflow-Y:auto;"> 
    <div class="col-sm-3" *ngFor="let user of users ;let i = index "> 
     <div class="user_main"> 
     <img *ngIf="user.image == ''" src="http://localhost/AdminApp/assets/images/{{user.image}}" class="user_img"> 
     <div style="margin:0px 5px;"> 
      <p class="user_name">{{user.first_name }} {{user.last_name}}</p> 
      <p class="user_email"> {{user.email}} ,</p> 
      <span class="user_job"> {{user.job}} </span> 
     </div> 
     </div> 
    </div> 
    <button (click)="LoadMore()"> Load More </button> 
</div> 

Answer 1

あなたは、このためのディレクティブを作成してscrollイベントをリッスンするように@HostListenerを使用することができます。

import { Directive, ElementRef, HostListener, Input } from '@angular/core'; 

@Directive({ 
    selector: '[infiniteScroll]', 
}) 
export class InfiniteScrollDirective { 

    @Input() scrollThreshold = 200; // px 

    constructor(private element: ElementRef) {} 

    @Input('infiniteScroll') loadMore; 

    @HostListener('scroll') 
    public onScroll() { 
    const scrolled = this.element.nativeElement.scrollTop; 
    const height = this.element.nativeElement.offsetHeight; 

    // if we have reached the threshold and we scroll down 
    if (height - scrolled < this.scrollThreshold) { 
     this.loadMore(); 
    } 

    } 

} 

テストしたが、それは正しい方向にあなたを置く必要があるわけではありません。これを使用するには、このようにそれを実行します。

<div class="row" 
    style="margin:0px 0px;height:1000px; overflow-Y:auto;" 
    [infiniteScroll]="LoadMore"> 

おそらく、コンテキスト（thisキーワード）が保持されますので、矢印の関数としてLoadMoreを定義する必要があります。

// in component controller 
LoadMore =() => { // load more items }; 

Answer 2

@HostListener("window:scroll", ["$event"]) 
    onWindowScroll() { 
    let pos = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.offsetHeight; 
    let max = document.documentElement.scrollHeight; 
    if(pos == max) { 
     // action here 
      } 
    }