web-dev-qa-db-fra.com

Angular 7 ne se déclenche pas

Pour implémenter une barre de navigation d'espionnage dans mon Angular dans un composant MatDialog. J'ai implémenté une directive pour espionner l'événement de défilement en utilisant

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

J'ai également essayé 'scroll' Comme nom d'événement. Mais l'événement ne semble pas se déclencher. J'ai essayé plusieurs approches, e. g. en utilisant HostListener directement dans le composant de dialogue, en utilisant la fonction JavaScript window.onscroll() et la fonction rxjs fromEvent() mais sans succès.

Essayer d'autres événements CSS (par exemple window:click) Fonctionne très bien. Je l'ai également essayé dans un composant "normal" qui n'est pas affiché sous forme de dialogue mais l'événement n'y est pas déclenché non plus.

Quelle pourrait être la cause de ce comportement?

angularangular-materialangular7
5
MatterOfFact

La raison de ce comportement est que angular bloque l'événement de défilement.

Je l'ai résolu comme ceci:

  ngAfterViewInit(): void {

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

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

Essayez ceci ... Pas besoin de faire quoi que ce soit avec html.

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

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

Voici une alternative solution qui fonctionne plutôt bien.

En bref:

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