Как предотвратить обнаружение изменений при прокрутке?(Угловой)

Question

У меня большой компонент, и я хотел бы избежать ненужных обнаружений изменений для повышения производительности.

Я добавил changeDetection: ChangeDetectionStrategy.OnPush к @Component.

Я хотел бы обновитьстиль элемента, если он прокручивается.К сожалению, Angular запускает обнаружение изменений, каждый раз, когда я прокручиваю этот элемент.

Я пытался добавить прослушиватель событий к нативному элементу, чтобы избежать этого, но обнаружение изменений все еще запускается снова, когда я прокручиваю:

@ViewChild('my_element') my_element_ref: ElementRef;

ngOnInit() {
    this.my_element_ref.nativeElement.addEventListener('scroll', this.updateStyle);
}

ngAfterViewChecked() {
    console.log('check');
}

ngAfterViewChecked вызывается, даже если this.updateStyle - пустая функция.Но если я закомментирую this.my_element_ref.nativeElement.addEventListener('scroll', this.onScroll), то ngAfterViewChecked больше не будет вызываться.

Как можно вызвать функцию при прокрутке элемента, но избежать обнаружения изменений Angular?

Answer 1

просто введите NgZone в свой конструктор и подпишитесь на событие, подобное этому:

this.ngZone.runOutsideAngular(() => {
  ....addEventListener('...);
});

Имейте в виду, что обнаружение изменений не будет вызываться в этом случае, поэтому вы не сможете изменять стили с помощью привязки шаблона. Это должно быть изменено нативным JavaScript или использованием Renderer2

Answer 2

Возможно, вы захотите взглянуть на API ChangeDetectorRef.В частности, вы должны отсоединить обнаружение изменений для компонента, используя detach () (возможно, в конструкторе, как показано ниже), а затем пометить компонент для изменения в вашей функции прокрутки с помощью markForCheck ().

  constructor(public cd: ChangeDetectorRef) {
    this.cd.detach();
  }

this.cd.markForCheck(); 

Ниже приведены ссылки для справки.

https://blog.angularindepth.com/everything-you-need-to-know-about-change-detection-in-angular-8006c51d206f

https://angular.io/api/core/ChangeDetectorRef

Answer 3

Я бы предложил вам использовать ngZone.runOutsideAngular.

constructor (private zone : NgZone) {}
ngAfterViewInit () : any {
    this.zone.runOutsideAngular(() => {
      window.addEventListener('scroll', (e)=> {
        console.log( 'scroll event fired' );
      });
    });
  }