从内部div检测滚动事件

Question

我希望能够在从可滚动的内部div滚动时检测事件，而不仅仅是窗口目标。

例如，我有一个监听滚动事件的指令，这里我需要将‘host：'(window: scroll )’更改为其他值。

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

@Directive({
  selector: '[infinite-scroll]',
  host: {'(window:scroll)': 'track($event)'},
})

export class InfiniteScrollerDirective {
  @Output() scrolled = new EventEmitter();

  track(event: Event) {
    this.scrolled.emit({
        value: event
    });
  }
}

我在我的组件中使用它作为带有“滚动”输出的无限滚动指令。

<div infinite-scroll (scrolled)="onScroll($event.value)">
  <table class="table">
    <thead>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>...

事件发生在这里。

 onScroll(event: UIEvent) {

 }

Answer 1

我不明白为什么这里的每个人都想搞乱@HostListener。在处理页面级事件时，它绝对是必需的，但不是子元素。您可以使用Angular 2事件侦听器，而不是使用JQuery样式的事件绑定。如果你使用的是一个内部div，你所需要做的就是在你的div上添加scroll事件监听器，使用一个类似下面的回调方法：

HTML：

<div (scroll)="onScroll($event)">

</div>

TypeScript：

onScroll(event): void {

    // Interpret the scroll event
    // Do stuff on inner div scroll
}

Answer 2

Angular 2.0 RC

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

Answer 3

手动添加EventListner的最简单方法

    document.addEventListener('scroll', (e)=>{
        let el = this.elementRef.nativeElement;
        if(el.contains(e.target)){
        // do something
        }
    }, true);

结尾处的"true“告诉浏览器在分派时捕获事件，即使该事件通常不会冒泡，如change、focus和scroll。

不可能向@HostListener或renderer.listen传递useCapture参数。

销毁组件时，不要忘记删除此侦听器。