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

Angular 2.0 RC

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

Answer 2

我不确定为什么这里的每个人都试图弄乱@HostListener。在处理页面级事件时，它绝对是必需的，但不是子元素。您可以使用Angular 2事件侦听器，而不是使用JQuery样式事件绑定。如果您正在使用inner-div，那么您需要做的就是使用如下所示的回调方法在div上添加scroll事件侦听器：

HTML：

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

</div>

打字稿：

onScroll(event): void {

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

Answer 3

手动添加EventListner

的最简单方法

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

最后的“true”告诉浏览器在发送时捕获事件，即使该事件通常不起泡，如更改，聚焦和滚动。

无法将useCapture参数传递给@HostListener或renderer.listen。

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

Answer 4

根据此'in-viewpoint' Directive，您可以附加到自定义元素：

const CUSTOM_ELEMENT = this.elementRef.nativeElement || window; 
this.scrollWindow = Observable
      .fromEvent(CUSTOM_ELEMENT, 'scroll').debounceTime(50).subscribe((event) => {
        this.fireScrollEvent();
      });

Answer 5

要捕获div事件的scroll应该可滚动。

使其可滚动

它应该有适当的高度。
然后将overflow: scroll添加到样式。

完成上述操作后，您将从任何div获取滚动事件。

从内部div检测滚动事件

5 个答案: