Управление зонами через NgZone.runOutsideAngular()

Метод runOutsideAngular() из Angular позволяет выполнять код за пределами зоны Angular. Это предотвращает избыточное обнаружение изменений, ускоряя приложение в сценариях, где Angular не должен отслеживать изменения. Такой подход полезен для обработки скроллинга, таймеров или анимаций.

Пример:

import { Component, NgZone } from '@angular/core';

@Component({
  selector: 'app-optimization-example',
  template: `<p>Скорость приложения оптимизирована!</p>`,
})
export class OptimizationExampleComponent {
  constructor(private ngZone: NgZone) {
    this.ngZone.runOutsideAngular(() => {
      window.addEventListener('scroll', this.handleScroll);
    });
  }

  handleScroll = () => {
    console.log('Событие скроллинга обработано!');
  };
}

В данном примере Angular не отслеживает события scroll, что снижает нагрузку на систему. Однако важно помнить, что для обновления интерфейса нужно вернуться в зону Angular с помощью NgZone.run().

👉 @sWebDev