如何防止滾動檢測變化？ （角度）

Question

我的組件很大，因此我想避免不必要的更改檢測以提高性能。

我向@Component添加了changeDetection: ChangeDetectionStrategy.OnPush 。

如果要滾動元素，我想更新元素的樣式。 不幸的是，每次我滾動該元素時，Angular都會運行更改檢測。

我嘗試將事件偵聽器添加到本機元素中以避免發生這種情況，但是在滾動時，更改檢測仍在運行：

@ViewChild('my_element') my_element_ref: ElementRef;

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

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

即使this.updateStyle是一個空函數， ngAfterViewChecked調用this.updateStyle 。 但是，如果我注釋掉this.my_element_ref.nativeElement.addEventListener('scroll', this.onScroll) ，則不再調用ngAfterViewChecked 。

滾動元素時如何調用函數，但避免Angular的更改檢測？

Answer 1

我建議您使用ngZone.runOutsideAngular。

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

Answer 2

只需將NgZone注入您的構造函數中，然后訂閱這樣的事件：

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

請記住，在這種情況下不會調用更改檢測，因此您將無法使用模板綁定來更改樣式。 應該通過本機javascript或使用Renderer2進行更改

Answer 3

您可能需要查看ChangeDetectorRef API。 具體來說，您將使用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