onScroll événement déclenche la fonction dans Angular4
J'essaie d'afficher une pagination de la liste, terefore, 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 de défilement de l'événement.
C'est comment mon code HTML doc ressemble:
<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 le texte suivant:
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 il ne fonctionne pas de cette façon. Rien ne s'affiche dans ma console.
J'ai essayé de bien d'autres façons, comme l'utilisation de la @HostListener
, mais il n'a pas de travail:
@HostListener('window:scroll', ['$event'])
dotheJob(event) {
console.debug("Scroll Event", window.pageYOffset );
}
Pouvez-vous m'aider avec ce problème? Merci!!!! 🙂
- Cela ne fonctionne que si vous faites défiler toute la page, si vous voulez que les événements de défilement d'un élément, vous devez écouter
scroll
événements de cet élément. Veuillez fournir plus d'informations (par exemple un Plunker) pour obtenir des informations plus détaillées.
Vous devez vous connecter pour publier un commentaire.
Vous avez donné un autre nom de la fonction en utilisant @HostListner.Modifier votre code
et le modèle
Veuillez vérifier le plunk ici.Espérons que cela aide.
Le code ci-dessus va déclencher la fonction de défilement à la fois lorsque la page défile à l'écran ainsi que la div se défiler .Si vous ne souhaitez que des div de défilement de l'événement,veuillez utiliser le code suivant
Ce sera déclenché uniquement div défile à l'écran.Trouver le plunk ici
<div id="notifications-list" (scroll)="scrollHandler($event)" >
. Comment puis-je le faire?overflow-y:scroll
. Merci!!!!