web-dev-qa-db-fra.com

Angular 8 @HostListener ('window: scroll', []) ne fonctionne pas

J'ai essayé d'utiliser HostListener pour suivre la position de défilement pour changer la couleur de mon en-tête.

Mon composant d'en-tête est le suivant,

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

constructor(@Inject(DOCUMENT) private document: Document) { }

  ngOnInit() {
  }

  @HostListener('window:scroll', [])
  onWindowScroll() {
    console.log(window.scrollY);
  }

}

mais lorsque je fais défiler, je n'obtiens aucun journal dans la console.

J'ai essayé de mettre le HostListener dans le composant principal app.component, car mon composant d'en-tête postule corrigé, cependant je n'obtiens toujours aucun résultat et aucune erreur.

Merci

angularangular8angular-directive
3
DevStacker

Cela est dû aux styles globaux de styles.scss

De styles.scss change height en min-height

html, body {
    height: 100%;
}

Pour ça

html, body {
    min-height: 100%;
}

C'est ce qui a fonctionné pour moi, j'espère que cela aidera!

1
Amineze