Événement de défilement de fenêtres utilisant @HostListener ne fonctionnant pas

Question

Je rencontre des problèmes lors de la défilement d'une en-tête collante dans une application Angular 4. L'événement de défilement ne peut pas être détecté.

L'en-tête est placé dans le composant de présentation et le contenu que je veux faire défiler est placé dans le composant routes. Peut-être que c'est le problème?

Ceci est le code que j'ai implémenté.

Dans layout.component.ts

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

import { DOCUMENT } from "@angular/platform-browser"; 

@Component({ 

    selector: 'app-layout', 

    templateUrl: './layout.component.html', 

    styleUrls: ['./layout.component.css'] 
}) 

export class LayoutComponent implements OnInit { 

    public navIsFixed: boolean = false; 

    constructor(public router: Router, @Inject(DOCUMENT) private document: any) { } 

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

    onWindowScroll(){ 
     const number = window.pageYOffset || 
     document.documentElement.scrollTop || 
     document.body.scrollTop || 0; 
     if (number > 50) { 
     this.navIsFixed = true; 
     } else if (this.navIsFixed && number < 10) { 
     this.navIsFixed = false; 
     } 
    } 
} 

Dans layout.component.html

<div [class.fixed]="navIsFixed" class="header"> 

Answer 1

Cela devrait vous donner: faites défiler les événements

@HostListener('scroll', ['$event']) 
onScroll(event) { 
    ... 
} 

ou

<div (scroll)="onScroll($event)" 

Answer 2

Votre mise en page doit être à l'origine du problème. L'événement de défilement ne fonctionne que lorsque l'élément de modèle de composant peut réellement défiler. Voir ce stackblitz que j'ai fait. Changez les dimensions div et le défilement ne sera pas déclenché. Afin de le faire fonctionner, je suggère de faire à la directive et mettre à une div qui a 100vh de hauteur et 100vw de largeur.

import {Directive, ElementRef, HostListener} à partir de '@ angular/core';

@Directive({ selector: '[trackScroll]' }) 
export class TrackScrollDirective { 
    constructor(private el: ElementRef) { 
    } 

    @HostListener('document:scroll', []) 
    onScroll(): void { 
     console.log('I am scrolled'); 
    } 
} 

stackblitz