如何使 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 高度，但它不喜歡那樣。