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

问题描述

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

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?

推荐答案

这种行为的原因是 angular material 阻止了滚动事件.

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屋！