Angular多指令监听滚动事件：用@HostListener还是共享fromEvent？

1. 每个指令用@HostListener是否可行？ #

• 完全可行，但存在性能隐患。每个指令通过@HostListener('window:scroll')绑定滚动事件时，都会在window上注册一个独立的事件监听器。当页面上有多个这类指令时，滚动触发时会同时执行多个回调函数，频繁滚动场景下可能导致不必要的性能开销。

2. 更优的实现方式：全局滚动事件服务 #

推荐创建一个全局服务统一监听滚动事件，通过RxJS分发事件流，让所有需要的指令订阅这个流。这样整个应用只会注册一个滚动监听器，性能更优。

实现示例： #

滚动事件服务

import { Injectable } from '@angular/core';
import { fromEvent } from 'rxjs';
import { share, debounceTime } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class ScrollEventService {
  // 转换为热Observable，确保多订阅只注册一个监听器
  scroll$ = fromEvent(window, 'scroll').pipe(
    debounceTime(10), // 可选：防抖减少频繁触发
    share()
  );
}

指令中使用

import { Directive, OnInit, OnDestroy } from '@angular/core';
import { ScrollEventService } from './scroll-event.service';
import { Subscription } from 'rxjs';

@Directive({ selector: '[appScrollListener]' })
export class ScrollListenerDirective implements OnInit, OnDestroy {
  private scrollSub!: Subscription;

  constructor(private scrollService: ScrollEventService) {}

  ngOnInit(): void {
    this.scrollSub = this.scrollService.scroll$.subscribe(() => {
      // 执行指令的滚动逻辑
      this.handleScroll();
    });
  }

  private handleScroll(): void {
    // 你的业务处理
  }

  ngOnDestroy(): void {
    this.scrollSub.unsubscribe();
  }
}

3. 使用InjectionToken共享fromEvent是否可行？ #

可以实现，但需要注意冷Observable转热Observable的处理：

• 直接用InjectionToken提供fromEvent(window, 'scroll')的话，每个指令注入后订阅，都会注册一个新的滚动监听器，和@HostListener的问题一样。
• 正确的做法是在提供token时，将Observable转为热Observable（比如用share()），确保多订阅共享同一个事件源：

实现示例： #

定义InjectionToken

import { InjectionToken } from '@angular/core';
import { fromEvent } from 'rxjs';
import { share, debounceTime } from 'rxjs/operators';

export const SCROLL_EVENT$ = new InjectionToken('Global scroll event observable', {
  providedIn: 'root',
  factory: () => fromEvent(window, 'scroll').pipe(
    debounceTime(10),
    share()
  )
});

指令中注入使用

import { Directive, OnInit, OnDestroy, Inject } from '@angular/core';
import { SCROLL_EVENT$ } from './scroll-event.token';
import { Observable, Subscription } from 'rxjs';

@Directive({ selector: '[appScrollTokenListener]' })
export class ScrollTokenListenerDirective implements OnInit, OnDestroy {
  private scrollSub!: Subscription;

  constructor(@Inject(SCROLL_EVENT$) private scroll$: Observable<Event>) {}

  ngOnInit(): void {
    this.scrollSub = this.scroll$.subscribe(() => {
      this.handleScroll();
    });
  }

  private handleScroll(): void {
    // 你的业务处理
  }

  ngOnDestroy(): void {
    this.scrollSub.unsubscribe();
  }
}

这种方式和全局服务的效果类似，区别在于用InjectionToken更偏向于底层的Observable共享，而服务的方式可以封装更多额外逻辑（比如添加滚动位置计算、节流防抖的配置等），灵活性更高。

内容的提问来源于stack exchange，提问作者Fag