Angular 当用户将鼠标悬停在 Openlayers 地图上时重新呈现

Question

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

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

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

我想用 plunker 或 codesanbox 在线创建运行nable 但是当我做这个例子时 window 冻结了，因为在重新渲染中存在无限循环，这使得它们无法使用，但事实并非如此当我在本地运行这个项目时，它不会真的发生，它只会在悬停时发生

谢谢。

Answer 1

克隆你的 repo 以查看东西后，有两件事。

首先，用例非常简单，因此您不会看到使用推送更改检测策略的所有好处，该策略可以缓解大部分问题，因为它不会导致非根组件具有更改检测周期（如果所有组件都使用推送策略）。

其次，由于底层地图库 (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
      });
    });
  }
}

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

Angular 当用户将鼠标悬停在 Openlayers 地图上时重新呈现

Angular rerenders when user hovers over Openlayers map

openlayers

angular-components

angular

angular-renderer

openlayers-6