Angular 如何从自定义指令发出？

我一直在研究检测滚动结束的自定义指令（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);
    }
  }
}

从'@angular/core'导入{HostListener，Directive，Output，EventEmitter}；
@指示({
选择器：“[scroller]”
})
导出类scrollDirectiveComponent{
@HostListener（'滚动'，['$event']））
@Output（）emitPageNumber:EventEmitter由以下原因引起：self.\u scrollDirectiveComponent\u 32\u 3.emitPageNumber不是函数

我做错了什么？
在
@HostListener（…）

谢谢你的回复。现在我明白了错误的意思。我的滚动处理程序是onScroll（），我已经把它移到@Output（）下面了。
        <div class="alert-list" scroller (emitPageNumber)="fetchPageNumber($event)">

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