지속적으로 서비스를 실행하고 변수 값을 확인하십시오.

Question

사용자 창이 특정 지점을 넘어서 스크롤되었는지 알려주는 코드를 작성했습니다. 나는 다른 컴포넌트가이 정보를 필요로 할 때 서비스가 될 필요가 있다는 것을 빨리 깨달았다.

로직에서 @HostListener를 사용했으며 결과를 얻을 수있었습니다. 이제 이것이 서비스에 모두 포함되었으므로 서비스를 호출 할 때 창을 특정 지점 이상으로 스크롤 한 경우에만 알 수 있습니다.

문제는 어떻게 지속적으로 서비스를 호출합니까? 서비스에는 실시간 정보가 필요한 부울이 있습니다.

서비스

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

구성 요소

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

사용 setInterval 반복적으로 몇 가지 코드를 실행합니다. 하나의 가능한 구현

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