0

我在我的项目中与 Angular 8 一起使用 Openlayers 6。到目前为止，我注意到每当我将鼠标悬停在 Openlayers 地图上时，地图所在的 Angular 组件都会重新渲染。

我的问题是如何让父组件一直停止在悬停时重新渲染。因为它会减慢应用程序的速度。我的项目中有一个更大的组件，因此重新渲染所有内容，这会使应用程序本身变慢。

为此，我创建了一个仓库来证明这一点：https ://github.com/petrovichm/angular-openlayers-hover-problem 。在此示例中，我在 html 中添加了一个方法，该方法将在运行时记录下来，从而概述了角度重新渲染组件的次数。

我想用 plunker 或 codesanbox 创建在线可运行但当我让这个示例窗口冻结时，因为重新渲染中有无限循环，这使得它们无法使用，当我在本地运行这个项目时并没有发生这种情况，它只发生在徘徊

谢谢。

4

1 回答 1

3

在克隆你的 repo 来查看之后，有两件事。

首先，用例非常简单，因此您不会看到使用 on push 更改检测策略的所有好处，因为它不会导致非根组件具有更改检测周期（如果所有组件都使用 on push 策略）。

其次，由于底层地图库 (OpenLayers) 将事件附加到 DOM 节点本身，这将导致 Angular 的更改检测由于 zone.js 拦截事件处理而触发。为了防止这种情况，您必须在 Angular 区域之外设置地图：

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

...
export class AppComponent implements OnInit {
  ...

  construtor(private zone: NgZone) {
  }

  ...

  ngOnInit() {
    this.zone.runOutsideAngular(() => {
      this.map = new Map({ ... });
    });
  }
}

在 Angular 区域之外运行东西时必须小心，但这样做可以防止出现问题。您必须将地图事件处理中的任何逻辑包装回 Angular 区域，以便 Angular 知道更新。

export class AppComponent implements OnInit {
  currentValue = 0;

  ...

  ngOnInit() {
    this.zone.runOutsideAngular(() => {
      this.map = new Map({ ... });
    });

    this.map.on('click', (e) => {
      this.currentValue++; // Angular will not pick up this change because it will run outside of the Angular zone
    });

    this.map.on('click', (e) => {
      this.zone.run(() => {
        this.currentValue++; // Angular will pick up this change because it will run inside the Angular zone
      });
    });
  }
}

这是一篇很好的博客文章，我认为可以进一步帮助理解这一点：https ://netbasal.com/optimizing-angular-change-detection-triggered-by-dom-events-d2a3b2e11d87 。

于 2020-02-07T23:36:20.407 回答