Ständig einen Dienst ausführen und einen Wert einer Variablen überprüfen

Question

Ich hatte einen Code erstellt, der mir sagen würde, ob das Fenster des Benutzers über einen bestimmten Punkt hinaus scrollte. Ich erkannte schnell, dass dies ein Service sein musste, da auch andere Komponenten diese Informationen benötigten.

Ich hatte @HostListener in der Logik verwendet und würde Ergebnisse erhalten. Nun, da dies alles in einem Dienst ist, weiß ich nur, ob das Fenster über einen bestimmten Punkt gescrollt wurde, als ich den Dienst anrufe.

Das Problem ist, wie rufe ich ständig den Service? Der Dienst hat einen Booleschen Wert, für den ich Echtzeit-Informationen benötige.

Dienst

import { Injectable, OnInit, HostListener, Inject } from '@angular/core'; 
import { DOCUMENT } from '@angular/platform-browser'; 

@Injectable() 
export class WindowScrollService { 
    public navIsFixed: boolean = false; 
    constructor(@Inject(DOCUMENT) private document: Document) { 

    } 
    @HostListener("window:scroll", []) 
    onWindowScroll() { 
    let number = this.document.body.scrollTop; 
    if (number > 20) { 
     this.navIsFixed = true; 
     console.log(this.navIsFixed); 
    } else if (this.navIsFixed && number < 10) { 
     this.navIsFixed = false; 
     console.log(this.navIsFixed); 
    } 
    } 
} 

Komponente

import { Component, OnInit } from '@angular/core'; 
import { WindowScrollService } from '../window-scroll.service'; 

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

    constructor(private windowscrollservice : WindowScrollService) { 
    this.navIsFixed = this.windowscrollservice.navIsFixed; 

    } 
    ngOnInit(){ 
    this.windowscrollservice.onWindowScroll() 
    } 
} 

Answer 1

Verwenden setInterval wiederholt einige Code auszuführen. Eine mögliche Implementierung

import { Component, OnInit } from '@angular/core'; 
import { WindowScrollService } from '../window-scroll.service'; 

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

    constructor(private windowscrollservice : WindowScrollService) { 
    this.navIsFixed = this.windowscrollservice.navIsFixed; 

    } 
    ngOnInit(){ 
    // run every 500ms 
    this.interval = setInterval(() => this.windowscrollservice.onWindowScroll(), 500); 
    // use clearInterval(this.interval) to stop 
    } 
}