Angular 7 滚动事件不触发

Question

用于在我的 Angular 应用程序的 MatDialog 组件中实现间谍导航栏。我使用

实现了一个指令来监视滚动事件

@HostListener('window:scroll', ['$event'])

我也试过 'scroll' 作为事件名称。但是这个事件似乎并没有发生。我尝试了几种方法，e。 G。通过直接在对话框组件中使用 HostListener，通过使用 JavaScript window.onscroll() 函数和 rxjs fromEvent() 函数但没有成功。

尝试其他 css 事件（例如 window:click）效果很好。我还在 "normal" 组件中尝试过，该组件未显示为对话框，但事件也未在那里触发。

这种行为的原因可能是什么？

Answer 1

此行为的原因是 angular material 阻止了滚动事件。

我是这样解决的：

  ngAfterViewInit(): void {

    const content = document.querySelector('.mat-dialog-container');
    const scroll$ = fromEvent(content, 'scroll').pipe(map(() => content));

    scroll$.subscribe(element => {
      // do whatever
    });
  }

Answer 2

这是一个替代方案，效果相当好。

简而言之：

ngOnInit() {
    // Add an event listener to window
    // Window can be defined in the pollyfiles.ts as: 
    // if (window) {
    //    (window as any).global = window;
    // }
    window.addEventListener('scroll', this.scroll, true); //third parameter
}

ngOnDestroy() {
    window.removeEventListener('scroll', this.scroll, true);
}

scroll = (event: any): void => {
  // Here scroll is a variable holding the anonymous function 
  // this allows scroll to be assigned to the event during onInit
  // and removed onDestroy
  // To see what changed:
  const number = event.srcElement.scrollTop;
  console.log(event);
  console.log('I am scrolling ' + number);
};

Answer 3

试试这个...不需要对 html 做任何事情。

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

@HostListener('window:scroll', ['$event']) getScrollHeight(event) {
   console.log(window.pageYOffset, event);
}

Angular 7 滚动事件不触发

Angular 7 scroll event does not fire

angular-material

angular

angular7