Angular HostListeners: Performance Risiken und Lösungen

Die Verwendung von Angular HostListeners kann zu Leistungsproblemen führen, insbesondere wenn die Host-Komponente viele davon hat und sie auf das window- oder document-Objekt abzielen. Dadurch wird die Angular Change Detection unnötig oft ausgelöst, was zu langsamen Anwendungen führen kann.

Es ist ratsam, die ngZone zu nutzen, um die Ausführung von Code außerhalb der Angular-Change-Detection zu steuern.

Hier ist ein Beispiel, wie man ein Scroll-Ereignis abfängt, indem man den ngZone.runOutsideAngular() -Methode aufruft, um das Angular Change Detection auszuschalten und ngZone.run() verwendet, um es manuell auszulösen, wenn nötig:

@Component({
  ...
})
export class InfiniteScrollComponent implements OnDestroy {
  private readonly ngZone = inject(NgZone);
  private readonly destroy$$ = new Subject<void>();

  constructor() {
    this.ngZone.runOutsideAngular(() => {
      fromEvent(document, 'scroll')
        .pipe(takeUntil(this.destroy$$))
        .subscribe((e: Event) => {
          this.ngZone.run(() => {
            this.calculatePageOnScroll(e);
          });
        });
    });
  }

  ngOnDestroy() {
    this.destroy$$.next();
    this.destroy$$.complete();
  }

  private calculatePageOnScroll(e: Event): void {
    // do the calculation here
  }
}