web-dev-qa-db-ja.com

Angular 7スクロールイベントが発生しない

私のAngular appにMatDialogコンポーネントでスパイナビゲーションバーを実装するために、私は以下を使用してスクロールイベントをスパイするディレクティブを実装しました

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

イベント名として_'scroll'_も試してみました。しかし、イベントは発生しないようです。私はいくつかのアプローチを試しました。 g。ダイアログコンポーネントで直接HostListenerを使用するか、JavaScript window.onscroll()関数とrxjs fromEvent()関数を使用しますが、成功しません。

他のcssイベント（例：_window:click_）を試すとうまくいきます。ダイアログとして表示されない「通常の」コンポーネントでも試してみましたが、イベントもそこで発生しません。

この行動の原因は何でしょうか？

angularangular-materialangular7
5
MatterOfFact

この動作の理由は、angularマテリアルがスクロールイベントをブロックするためです。

私はそれを次のように解決しました：

  ngAfterViewInit(): void {

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

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

これを試してください... htmlで何もする必要はありません。

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

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

これが代替案です solution これはかなりうまくいきます。

要するに：

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);
};
0
Jason