2017-01-24 6 views
0

角度2のカスタムイベントを間隔で聴くことはありますか? 3秒で1回好きですか?ホストリスナー待機

export class scrollDirectiveComponent{ 
    pageNo:any=1; 
    @Input() pageNumber:any; 
    @Output() emitPageNumber:EventEmitter<any> =new EventEmitter(); 
    @HostListener('scroll', ['$event']) 
     onScroll(event) { 
      console.log('scrolled', event.target.scrollTop); 
      let tracker = event.target; 
      let limit = tracker.scrollHeight - tracker.clientHeight - 5; 
      console.log(event.target.scrollTop, limit); 
      if (event.target.scrollTop > limit) { 
      this.pageNumber++; 
      this.emitPageNumber.emit(this.pageNumber); 
     } 
    } 
} 

スクロールイベントを聴取し続け、ページ番号が自動的にインクリメントされます。待機できない場合は、スクロールバーを新しい位置に変更することができますか?

+0

をやったことがないので、試してみる必要があることを確認していませんか? –

答えて

1

私が理解するとすぐに、このようにして、各スクロールイベントであなたは観測可能になり、観測可能なthrottleTime(3000)は1つのイベントだけが通過することを意味します。見て

export class scrollDirectiveComponent { 
    pageNumber: any = 1; 
    private scrollEvents = new Subject(); 
    constructor() { 
    scrollEvents 
     .throttleTime(3000) 
     .subscribe(() => { 
     this.emitPageNumber.emit(++this.pageNumber); 
     }); 
    } 

    @Input() pageNumber: any; 
    @Output() emitPageNumber: EventEmitter<any> = new EventEmitter(); 
    @HostListener('scroll', ['$event']) 
    onScroll(event) { 
    console.log('scrolled', event.target.scrollTop); 
    let tracker = event.target; 
    let limit = tracker.scrollHeight - tracker.clientHeight - 5; 
    console.log(event.target.scrollTop, limit); 
    if (event.target.scrollTop > limit) { 
     this.scrollEvents.next(true); 
    } 
    } 
} 

その他のオプションは、このようなものになるだろうが、私はあなたが私はあなたが3秒に一度のイベントを放出したいディレクティブ

constructor(private _el: ElementRef){ 
    Observable.fromEvent(_el, 'resize') 
    .throttleTime(3000) 
    .subscribe(() => { 
     this.emitPageNumber.emit(++this.pageNumber); 
    }); 
}