如何使 HostListener 滚动工作？

Question

我正在尝试添加一个window:scroll侦听器但是滚动时什么也没有发生

到目前为止我尝试过的：

在组件装饰器中使用host

@Component({
  ...
  host: {
    'window:scroll' : 'onWindowScroll($event)'
  },
  ...
)
export class PageWrapperComponent implements OnInit {
  ...
  public onWindowScroll(event: Event): void {
    console.log('scrolled');
  }
  ...
}

在组件装饰器中使用HostListener

export class PageWrapperComponent implements OnInit {
  ...
  @HostListener('window:scroll', ['$event'])
  public onWindowScroll(event: Event): void {
    console.log('scrolled');
  }
  ...
}

我也尝试在属性指令中使用它，但它也不起作用

两者都不会触发console log 。 我在 SO 中搜索了类似的问题，但即使我的代码基本相同，它仍然不起作用。

Answer 1

在组件装饰器中使用主机

它应该是：

'(window:scroll)' : 'onWindowScroll($event)'

Plunker 示例

在组件装饰器中使用 HostListener您的语法看起来正确

@HostListener('window:scroll', ['$event'])
public onWindowScroll(event: Event): void {
  console.log('scrolled');
}

Plunker 示例

您还可以确保您的组件具有滚动功能。 在我的例子中，我通过以下方式模仿滚动：

styles: [`
    :host {
      display: block;
      height: 2000px;
    }
`]

Answer 2

我和我的团队最近遇到了这个问题。 我们的解决方案是使用 angular 的 Renderer 为 elementRefs parentNode 上的 'scroll' 事件设置一个监听器。

`constructor(
  private _renderer: Renderer,
  private _elementRef: ElementRef
) {
  this._renderer.listen(this._elementRef.nativeElement.parentNode, 
   'scroll', (event) => {
      // do stuff with the event
  });
}`

Answer 3

（代表问题作者发表） 。

我能够找出 HostListener 不工作的原因，我使用的是 angular/material 组件库，我用 100vh 覆盖了 md-sidenav-layout 高度，但它不喜欢那样。