прокрутки Hostlistener

Question

Я определил шаблон

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

и класс

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

    products = []; 
} 

Но он не выстрелил ничего, однако, когда я заменить свиток и OnScroll с щелчком и OnClick это действительно показывает предупреждение ,

Почему он не работает со свитком, имеет ли у angular2 какую-либо другую реализацию?

Благодаря

Answer 1

Предполагая, что вы хотите, чтобы отобразить хозяин прокрутку (а не окно один), и что вы используете углового +2,1

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

Answer 2

Вы можете создать пользовательскую директиву как сильфон

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() { } 

} 

А потом если у вас есть шаблон HTML, как

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

используйте следующий CSS

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

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

консоль будет печатать «прокрутке» на запуск приложения, если вы переместите горизонтальную полосу прокрутки.

Здесь ключ заключается в том, что директива scoller должна быть у родителя, а не в дочернем div.

Answer 3

(scroll)="yourFunction($event)" в шаблоне соответствующего элемента.