Question

是否可以在简单的服务而不是组件或指令代码中使用Angular @HostListener（'window：scroll'，）？

我不想对我的任何组件进行轮询，因为滚动的意识应该注入其他几个服务......目前我有以下代码编译，但不能以某种方式工作。

import { Component, OnInit, Injectable, Inject, HostListener } from '@angular/core';
import { SearchService } from './search.service';
import { DOCUMENT } from '@angular/platform-browser';

const scrollStepToReload = 3700;

@Injectable()
export class ScrollWatcherService {

  private maxReachedScroll = 0;
  private lastLoadedAt = 0;

  constructor(private searchService: SearchService, @Inject(DOCUMENT) private document: any) { }

  @HostListener('window:scroll', ['$event'])
  onScroll($event) {

    const scrollOffset = window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0;
    console.debug("Scroll Event", scrollOffset);

    if (scrollOffset > this.maxReachedScroll) {
      this.maxReachedScroll = scrollOffset;
    }
    if (this.lastLoadedAt + scrollStepToReload < this.maxReachedScroll) {

      this.lastLoadedAt = this.maxReachedScroll;
      this.searchService.continueSearch();

    }
  }
}

类似的代码可以根据需要使用组件。任何想法如何让它在服务中运行？或类似的东西？

Answer 1

您不能在服务中拥有HostListener。使用经典：

window.addEventListener('scroll', () => { console.log('scrolling'); });

是否可以在简单的服务而不是组件或指令中使用Angular @HostListener（'window：scroll'，）

1 个答案: