2017-01-23 76 views
1

我一直在處理檢測滾動結束的自定義指令(Scroller)。我想盡快滾動結束(即到達頁面的結尾)如何從自定義指令發出?

自定義指令發出數:

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



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


export class scrollDirectiveComponent{ 
    @HostListener('scroll', ['$event']) 

    @Output() emitPageNumber:EventEmitter<any> =new EventEmitter(); 
    pageNo:any=0; 
    onScroll(event) { 
    // do tracking 
    console.log('scrolled', event.target.scrollTop); 
    // Listen to click events in the component 
    let tracker = event.target; 

    let limit = tracker.scrollHeight - tracker.clientHeight; 
    console.log(event.target.scrollTop, limit); 
    if (event.target.scrollTop >= limit) { 
     console.log('end reached'); 
     this.pageNo++; 
     this.emitPageNumber.emit(this.pageNo); 
    } 
    } 
} 

我綁定的指令,我父模板

 <div class="alert-list" scroller (emitPageNumber)="fetchPageNumber($event)"> 

但當我滾動我得到一個錯誤爲 core.umd.js:3462 EXCEPTION:錯誤http://localhost:3000/app/menu-board/menu.component.html:63:8造成的:self._scrollDirectiveComponent_32_3.emitPageNumber不是函數

我做錯了什麼?

回答

2

有一些代碼丟失後@HostListener(...)

@HostListener('scroll', ['$event']) 
scrollHandler(event) { 
    ... 
} 
+1

謝謝你的回覆。現在我明白了錯誤的含義。我的滾動處理程序是onScroll(),我已將它移動到@Output()之下。 – CruelEngine