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 Example

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

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

<强> Plunker Example

您还可以确保您的组件已滚动。在我的例子中，我模仿滚动：

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

Answer 2

我和我的团队最近遇到了这个问题。我们的解决方案是使用角度渲染器为“滚动”设置听众。 elementRefs parentNode上的事件。

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

Answer 3

（代表问题作者发布）。

我能够弄清为什么HostListener无法正常工作的原因，我正在使用角度/材质组件库，并且以100vh覆盖了md-sidenav-layout高度，但事实并非如此。

如何使HostListener滚动工作？

3 个答案: