Javascript 如何使滚动的HostListener工作？

我试图添加一个

窗口：滚动
侦听器，但滚动时什么都没有发生

到目前为止，我所尝试的：

使用
主机
内部组件装饰器

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

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

使用
主机侦听器
内部组件装饰器

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

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

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

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

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

两者都不会触发
控制台日志。我在SO中搜索过类似的问题，但即使我的代码本质上是相同的，它仍然不起作用
 使用主机内部组件装饰器

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

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

应该是：

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


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

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


您还可以确保您的组件具有滚动。在我的示例中，我通过以下方式模拟scroll：

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

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

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

（代表问题作者张贴）

我能够找出HostListener不工作的原因，我使用的是角度/材质组件库，我用100vh覆盖了md sidenav布局高度，但它不喜欢这样。
感谢回复和plunker示例。不幸的是，它仍然不起作用。我想这可能是
视图封装的问题
我在一些父组件中将其设置为
无
，您认为这可能会导致它无法工作吗？不，我不这么认为。你需要提供plunker来复制它我会尝试，给我几分钟。有趣的是我不能在plunker上复制它。我的控制台上也没有错误或警告。我会考虑的，谢谢你的帮助。我将它标记为已回答，因为我知道这是正确的答案，而且很可能是我的代码中的某些内容。你能详细说明一下吗。我是新手。