切换组件时，Angular 中的 Openlayers 地图为空白

Question

我有一个加载 OpenLayers 地图的 MapComponent。该组件在我的 Angular 应用程序的各个页面中重复使用。

地图第一次加载正常。但是，当我导航到包含该地图的另一个组件时，地图变为空白。为了再次看到它，我必须导航到不包含地图的组件，然后导航回所需的页面。

我只在升级到 Angular 10（从 8）后才观察到这种行为。

Openlayers 6.5 和 5.3 版本都存在此问题。

尝试解决：

1. 我尝试过强制设置this.map = null页面的 OnDestroy 生命周期挂钩。听起来不像是一个好的解决方案并且不起作用。

2. 我尝试在 AfterContentInit 中抛出错误：

ngAfterContentInit() {
   throw new Error("gramschaap");
}

它对页面的渲染有点混乱，当然会留下一个很大的错误，但可以工作。

3. 我尝试设置一个超时来删除并重新设置地图的目标ngAfterViewInit：

ngAfterViewInit() {
    this.initMap();
    setTimeout(() => {
      if (this.map) {
        this.map.setTarget(null);
        this.map.setTarget("mapTarget");
      }
    }, 1000);
}

这当然意味着地图在重新绘制之前有一秒钟的空白；但它有效！

4. 我尝试将地图目标设置为 处不存在的内容ngOnDestroy。

ngOnDestroy() {
    this.map.setTarget("raargitaar");  // does not exist
}

我认为这可能与目标没有再次初始化有关。但这不起作用。

Answer 1

另一种方法可能是使用动态地图 ID 作为目标。

我消除了与您的第三次尝试类似的问题。但是，我给出了 0 超时而不是 1 秒，而你不需要setTarget(null).

private initMap(): void {
  this.map = new Map({...})
  setTimeout(() => {
    this.map.setTarget('id');
  }, 0);
}