web-dev-qa-db-fra.com

La fonction de déclencheurs d'événement onScroll dans Angular4

J'essaie d'afficher une liste paginée, par conséquent, lorsque l'utilisateur fait défiler vers le bas, je veux déclencher une fonction qui charge plus d'éléments. Mais je ne peux pas appeler la fonction sur l'événement 'scroll'.

Voici à quoi ressemble mon document HTML:

   <div id="notifications-list"  (scroll)="scrollHandler($event)"  >
       <div class="row notification-row" *ngFor = "let notification of notifications" > 
                ...
       </div>
    </div>

Et dans mon fichier .ts, j'ai les éléments suivants:

      import { Component, OnInit, ViewChild, ViewEncapsulation, AfterViewChecked, ElementRef,  HostListener  } from '@angular/core';
        @Component({
            selector: 'header-component',
            templateUrl: 'header.component.html',
            styleUrls: ['header.component.css'],
            encapsulation: ViewEncapsulation.None,

        })

        export class HeaderComponent implements OnInit {
         constructor( ...){}


  scrollHandler(event){
    console.log(event);
    console.log('now you are scrolling');
  }

Mais cela ne fonctionnera pas de cette façon. Rien ne s'affiche dans ma console. J'ai essayé de nombreuses autres façons, comme en utilisant le @HostListener, mais cela n'a pas fonctionné:

@HostListener('window:scroll', ['$event']) 
    dotheJob(event) {
      console.debug("Scroll Event", window.pageYOffset );
    }

Pouvez-vous m'aider avec ce problème? Je vous remercie! :)

htmlangulartypescriptevent-handlingonscroll
7
Emanuela Colta

Vous avez donné un nom de fonction différent lors de l'utilisation de @ HostListner.Modifiez votre code comme

@HostListener('window:scroll', ['$event']) 
    scrollHandler(event) {
      console.debug("Scroll Event");
    }

et modèle

<div id="notifications-list"  (scroll)="scrollHandler($event)"  >
       <div class="row notification-row" *ngFor = "let notification of notifications" > 
                ...
       </div>
    </div>

Veuillez vérifier le plunk ici . J'espère que cela aide.

Le code ci-dessus déclenchera la fonction de défilement à la fois lorsque la page défile et que le div défile. Si vous ne souhaitez que l'événement de défilement div, veuillez utiliser le code suivant

@HostListener('scroll', ['$event']) 
        scrollHandler(event) {
          console.debug("Scroll Event");
        }

Cela ne se déclenchera que si div est déroulé.Trouvez le plunk ici

11
Vikhyath Maiya