typescript 如果没有设置超时，OpenLayers贴图不会出现在Angular 对话框中

6ljaweal 于 2022-12-30 发布在 TypeScript

关注(0)|答案(2)|浏览(135)

我正在使用OpenLayers在Angular应用程序中显示Map。Map位于对话框元素中，当对话框打开时不会显示。但是，如果我使用setTimeout函数延迟设置Map的目标，Map会显示。我不明白为什么会发生这种情况。避免使用setTimeout的最佳方法是什么？

setTimeout(() => {
  this.map.setTarget('location_map');
}, 500);

typescript

来源：https://stackoverflow.com/questions/74929987/openlayers-map-not-appearing-in-angular-dialog-without-settimeout

2条答案

按热度按时间

bkkx9g8r1#

我明白了这个问题，我找到了一个解决办法：
问题：当我尝试设置map的目标时，map的DOM元素（ID为"location_map"的元素）尚未出现在DOM中。
解决方案：为了避免使用setTimeout，我使用Angular的生命周期钩子在组件完成渲染后设置map的目标。
我使用ngAfterViewInit钩子在组件的视图完全初始化之后设置map的目标。
比如：

import { Component, AfterViewInit } from '@angular/core';

@Component({
  // component metadata here
})
export class MyComponent implements AfterViewInit {
  map: any;

  ngAfterViewInit() {
    // Initialize the map here, then set the target once the map is ready
    this.map = new Map({
      // map options here
    });
    this.map.setTarget('location_map');
  }
}

赞(0）回复(0）举报 2022-12-30

sd2nnvve2#

最有可能的是，map的目标在dialog元素创建之前就已经设置好了，但是没有代码很难判断。如果元素已经存在，并且您修改了它的大小或可见性来显示它，那么您应该使用map.updateSize()更新map的大小

赞(0）回复(0）举报 2022-12-30