Scroll-Ereignis auf Hostlistener

Question

Ich habe Vorlage definiert

@Component({ 
    selector: 'name', 
    directives: [ ... ], 
    templateUrl: 'name.html' 
}) 

und Klasse

export class ProductGridComponent implements OnInit { 
    @HostListener('scroll', ['$event']) 
    onScroll(e) { 
     alert(window.pageYOffset) 
    } 

    products = []; 
} 

Aber es hat nichts geschossen, aber wenn ich ersetzen Scroll- und OnScroll mit klicken und ONCLICK es in der Tat die Warnung anzeigen .

Warum funktioniert es nicht mit scroll, hat angular2 irgendeine andere Implementierung dafür?

Dank

Answer 1

Sie Angenommen, der Host-Scroll angezeigt werden (und die Fenster nicht ein), und dass Sie verwenden Winkel +2,1

@HostListener('scroll', ['$event']) private onScroll($event:Event):void { 
    console.log($event.srcElement.scrollLeft, $event.srcElement.scrollTop); 
    }; 

Answer 2

Sie können wie unten

eine benutzerdefinierte Richtlinie erstellen

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

@Directive({ 
    selector: '[scroller]' 
}) 
export class ScrollerDirective { 

    @HostListener('scroll') scrolling(){ 
    console.log('scrolling'); 
    } 

    @HostListener('click') clicking(){ 
    console.log('clicking...'); 
    } 

    constructor() { } 

} 

Und dann vorausgesetzt, Sie eine hTML-Vorlage haben wie

<div class="full-width" scroller> 
    <div class="double-width"></div> 
</div> 

verwenden Sie die folgende CSS

.full-width{ 
    width: 200px; 
    height: 200px; 
    overflow: auto; 
} 

.double-width{ 
    width:400px; 
    height: 100%; 
} 

die Konsole „Scrollen“ auf läuft die App gedruckt werden, wenn Sie die horizontale Bildlaufleiste bewegen.

Hier ist der Schlüssel, dass - die Scoller-Direktive sollte in der Eltern nicht in der Kind-div sein.

Answer 3

Setzen Sie (scroll)="yourFunction($event)" innerhalb der Vorlage auf das entsprechende Element.