Ionic-v4中TypeError: Cannot read property 'nativeElement' of undefined问题求助

你碰到的这个TypeError: Cannot read property 'nativeElement' of undefined其实是Angular生命周期钩子的典型问题——你在ngOnInit里就调用displayGoogleMap()了，但这时候视图还没渲染完成，@ViewChild('map')绑定的DOM元素还没被创建出来，所以mapContainer自然是undefined。

咱们直接来改代码解决：

步骤1：调整生命周期钩子逻辑 #

要把地图初始化的逻辑移到ngAfterViewInit里，这个钩子会在视图和子视图完全渲染完成后才触发，这时候@ViewChild才能正确拿到DOM元素的引用。

更新你的page.ts文件：

1. 首先导入AfterViewInit接口：

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

2. 让组件实现这个接口：

export class AddMarkerPage implements OnInit, AfterViewInit

3. 拆分生命周期方法的内容：

ngOnInit() {
  // 只保留数据初始化逻辑
  this.museumData = this.placeDataService.getMuseums();
}

ngAfterViewInit() {
  // 视图渲染完成后再初始化地图和标记
  this.displayGoogleMap();
  this.getMarkers();
}

步骤2：（可选）确保地图容器有高度 #

补充个小细节，很多人改完生命周期后地图还是不显示，大概率是因为map的div没有设置高度，你可以在add-marker.page.scss里添加这段样式：

#map {
  height: 100%;
  width: 100%;
}

这样修改之后，就能保证在DOM元素准备就绪的状态下初始化地图，彻底解决nativeElement undefined的问题啦。

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