Angular 7滚动事件不会触发 [英] Angular 7 scroll event does not fire

问题描述

用于在MatDialog组件的Angular应用中实现间谍导航栏.我实现了一个指令来监视使用

For implementing a spy nav bar in my Angular app in a MatDialog component. I implemented a directive to spy for the scroll event using

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

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

I also tried 'scroll' as event name. But the event does not seem to fire. I tried several approaches, e. g. by using the HostListener directly in the dialog component, by using the JavaScript window.onscroll() function and the rxjs fromEvent() function but without success.

尝试其他CSS事件(例如 window:click )工作正常.我还在普通"组件中尝试过该组件，该组件未显示为对话框，但该事件也未在其中触发.

Trying other css events (e. g. window:click) work fine. I also tried it in a "normal" component that is not displayed as a dialog but the event is not fired there either.

这种行为可能是什么原因?

What could be the cause of this behaviour?

推荐答案

此行为的原因是棱角材料会阻止滚动事件.

The reason for this behaviour is that angular material blocks the scroll event.

我这样解决了:

  ngAfterViewInit(): void {

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

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

这篇关于Angular 7滚动事件不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！