Угловое событие прокрутки 7 не срабатывает

Question

Для реализации панели шпионской навигации в моем приложении Angular в компоненте MatDialog. Я реализовал директиву шпионить за событием прокрутки, используя

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

Я также попытался 'scroll' в качестве имени события. Но событие не похоже на огонь. Я пробовал несколько подходов, e. г. используя HostListener непосредственно в компоненте диалога, используя функцию JavaScript window.onscroll() и функцию rxjs fromEvent(), но безуспешно.

Попытка других событий CSS (например, window:click) работает нормально. Я также попробовал сделать это в «обычном» компоненте, который не отображается как диалог, но событие там тоже не запускается.

Что может быть причиной такого поведения?

Answer 1

Вот альтернативное решение , которое работает довольно хорошо.

Короче говоря:

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 2

Причиной такого поведения является то, что угловой материал блокирует событие прокрутки.

Я решил это так:

  ngAfterViewInit(): void {

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

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