Angular 2: Scroll-Ereignis nicht feuern

Question

Ich bin neu in Angular 2. Versuchen, Rest Anruf mit Scroll-Ereignis zu machen. Ich habe 200 Datensätze, wo ich zunächst so einen Restanruf mache

localhost:8080/myapp/records=items&offset=0&limit=50 

Es wird 50 Datensätze zuerst holen. Aber, wenn ich nach unten scrollen muss es eine andere API-Aufruf machen zum Abrufen weitere 50 Datensätze wie

localhost:8080/myapp/records=items&offset=50&limit=50 

ich das versucht, aber das Ereignis nicht ausgelöst.

HTML

<div> 
    <table class="doc-table" (scrolled)="onScroll($event.value)"> 
     <thead> 
      <th class="avatar-th"></th> 
      <th>Id</th> 
      <th>Name</th> 
      <th>Price</th> 
     </thead> 
     <tbody> 
      <tr *ngFor="let item of items" (click)="routeTo(item.id)"> 
       <td>{{item.id}}</td> 
       <td>{{item.name}}</td> 
       <td>{{item.price}}</td> 
      </tr> 
     </tbody> 
    </table> 
    </div> 

Script

@Component({ 
    selector: 'item-cmp', 
    templateUrl: 'items.component.html' 
}) 
export class PatientsComponent(){ 
    onScroll(event:any){ 
    alert("Scolled..."); 
    } 
} 

Bases auf Offset Ich habe API-Aufruf zu machen. Hilf mir, wie das geht?

Answer 1

Es gibt kein scrolled Ereignis.

nehme ich es

<table class="doc-table" (scroll)="onScroll($event)"> 

außer sein sollte, wenn scrolled einige benutzerdefinierte Ereignis von Ihnen.

Answer 2

ich über diese gerade kam, nach einem Weg suchen Eckige zu sagen, dass ich die Spirale (Rad) Ereignis will passive (nicht möglich noch - #8866) zu sein. Aber das Schlüsselwort hier für Ihre Frage ist Rad.

Dies ist eine ziemlich alte Frage, wahrscheinlich haben Sie es bereits gelöst, aber es gibt keine Antwort geschrieben, so dass diejenigen, die auf das gleiche Problem stoßen, werden nicht ihre Antwort bekommen.

Hier ist sie:

Es gibt keine scrolled Ereignis.

Wie für die scroll Ereignis: Es kann nicht einfach an irgendein Element delegiert werden. Sie können es an window oder document, aber nicht an Ihre div anschließen.

Was Sie suchen ist die wheel Veranstaltung:

<div (wheel)="onMouseWheel($event)"></div> 

Dann können Sie einfach überprüfen, was das Ereignis in Ihrer Komponente bietet:

onMouseWheel(evt) { 
    console.log('Wheel event: ', evt); 
} 

Damit Sie wissen, was zu verwenden .. Zum Beispiel kann der "Abstand" gescrollt werden und die Richtung kann von evt.deltaX, evt.deltaY bekannt sein. Wenn deltaX positiv ist, haben Sie horizontal (auf der X-Achse) nach rechts gescrollt. Wenn es negativ ist, haben Sie nach links gescrollt. Sie bekommen den Punkt.

P.S. Und keine Sorge, auch wenn es wheel genannt wird, wird es auch bei Verwendung des Touchpads ausgelöst.Wahrscheinlich hätte ich meine Methode einfach onWheel nennen sollen.

P.P.S. Ich sehe eine andere Antwort, die mousewheel vorschlägt. mousewheel war nie Standard und ist veraltet - MDN link

Ich empfehle die Verwendung wheel.

Answer 3

mousewheel Ereignis wird das Scrollen verarbeiten.

HTML

<div style="height:1000px" (mousewheel)="mousewheel($event)"> 

</div> 

Typoskript

mousewheel(event){ 
    console.log(event) 
    } 

Sie eine benutzerdefinierte Richtlinie erstellen und handhaben es auch,

@HostListener('mousewheel', ['$event']) onMousewheel(event) { 
      do something 
} 

LIVE DEMO

Answer 4

Ich hatte das gleiche Problem zuvor und die Lösung war eine Direktive mit einem Host Listener Decorator zu erstellen.

@HostListener('scroll', ['$event']) public scrolled($event: Event) { 
    this.elementScrollEvent($event); 
} 

und für Fenster

@HostListener('window:scroll', ['$event']) public 
    windowScrolled($event: Event) { 
    this.windowScrollEvent($event); 
} 

auf jeden Fall Ereignisse, ich veröffentlichte auch eine NPM-Modul blättern Ereignisse zu erkennen und, wenn der Benutzer den Boden nähert des Elements ist, um herauszufinden, die laden nächste Seite oder nicht.

überprüfen https://www.npmjs.com/package/ngx-scroll-event