在Hostlistener上滚动事件

Question

我已经定义了模板

@Component({
    selector: 'name',
    directives: [ ... ],
    templateUrl: 'name.html'
})

和班级

export class ProductGridComponent implements OnInit {
    @HostListener('scroll', ['$event'])
    onScroll(e) {
        alert(window.pageYOffset)
    }

    products = [];
}

但它没有拍摄任何东西,但是当我用click和onClick替换scroll和onScroll时它确实显示了警告.

为什么它不能用于滚动,angular2是否有任何其他实现呢？

谢谢

Answer 1

假设您要显示主机滚动(而不是Windows窗口)并且您正在使用角度+2.1

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

Answer 2

您可以创建像bellow一样的自定义指令

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

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

  @HostListener('scroll') scrolling(){
    console.log('scrolling');
  }

  @HostListener('click') clicking(){
    console.log('clicking...');
  }

  constructor() { }

}

然后假设你有一个类似的html模板

<div class="full-width" scroller>
    <div class="double-width"></div>
</div>

使用以下css

.full-width{
    width: 200px;
    height: 200px;
    overflow: auto;
}

.double-width{
    width:400px;
    height: 100%;
}

如果移动水平滚动条,控制台将在运行应用程序时打印"滚动".

关键是 - scoller指令应该在父级而不是子级div中.

Answer 3

@HostListener('document:wheel', ['$event.target'])
public onWheel(targetElement) {
    console.log()
}

Answer 4

(scroll)="yourFunction($event)"在模板内的相应元素处进行设置。

Answer 5

您也可以通过以下代码来完成：

import { HostListener} from "@angular/core";

@HostListener("window:scroll", [])
onWindowScroll() {
 //we'll do some stuff here when the window is scrolled
}