angular - Fönstrets scrollhändelse med @HostListener fungerar inte

Jag har problem med att göra en klibbig header när jag scrollar nedåt i en Angular 4-applikation. Scrollhändelsen kan inte detekteras.

Headern är placerad i layoutkomponenten, och innehållet jag vill ska rulla är placerat i routes-komponenten. Kan det vara problemet?

Det här är koden jag implementerade.

I 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;
      }
    }
}

I layout.component.html

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

Svar #1

Jag hade precis samma problem, allt jag behövde göra var att se till att komponentelementet faktiskt är det som rullar och att det har en overflow-egenskap med värdena scroll eller auto.

Annars fungerade bara detta:

@HostListener('scroll')
  public asd(): void {
  console.log('scrolling');
}

Svar #2

Din layout måste vara källan till problemet. Scroll-händelsen fungerar endast när komponentmallens element faktiskt kan scrolla.

Se till att div-elementet har overflow-egenskapen inställd på scroll. Ändra också div-dimensionerna så att scrollning kan triggas.

För att få det att fungera skulle jag föreslå att göra det till direktivet och sätta det till en div som har 100vh i höjd och 100vw i bredd.

import { Directive, ElementRef, HostListener } from '@angular/core';

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

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

Se denna stackblitz som jag gjorde.

Relaterade artiklar