PrimeNG p-dialog 中嵌入的Google Map无法正常加载如何解决？

问题根因 #

PrimeNG的p-dialog默认采用懒加载DOM机制，弹窗未触发打开时，弹窗插槽内的所有子元素不会真实挂载到DOM树中。通常地图初始化逻辑会写在地图组件的ngOnInit生命周期钩子中，此时地图容器DOM节点还不存在，Google Map实例无法完成挂载，最终导致渲染空白。

修复步骤 #

• 调整地图初始化触发时机：给p-dialog绑定onShow事件，等弹窗完全打开、DOM渲染完成后再触发地图初始化逻辑，示例代码如下：

<!-- 父组件弹窗模板 -->
<p-dialog header="地图弹窗" [(visible)]="dialogVisible" (onShow)="initMapAfterDialogOpen()">
  <app-map #mapComponent></app-map>
</p-dialog>

// 父组件业务代码
@ViewChild('mapComponent') mapComponent: MapComponent;

initMapAfterDialogOpen() {
  // 调用子地图组件暴露的初始化方法
  this.mapComponent.initGoogleMap();
}

• 给地图容器设置明确的宽高样式：Google Map要求挂载的容器必须有可计算的宽高值，不能完全靠内容撑开，示例样式如下：

/* 地图组件的容器样式 */
.google-map-wrapper {
  width: 100%;
  min-height: 400px;
}

• 若需要弹窗打开前就预加载内部DOM，可以给p-dialog添加[lazy]="false"属性，强制弹窗初始化时就渲染插槽内容，同时把地图初始化逻辑延后到ngAfterViewInit生命周期执行，搭配setTimeout或者ChangeDetectorRef手动触发变更检测，避免Angular变更检测报错。

注意事项 #

• 弹窗多次打开的场景下，初始化地图前要判断地图实例是否已经存在，避免重复初始化导致报错或内存泄漏。

内容的提问来源于stack exchange，提问作者Sai Charan