Angular 4 Mapbox通过ngFor创建多个地图

Question

我正在尝试使用 *ngFor 创建多个地图，但在我将其分配给 mapbox 的容器变量之前，组件 div 中的 id 必须准备就绪。不幸的是，如果不使用 setTimeout，它会抛出地图 ID 未定义的错误。

我的组件 html 看起来像这样 -

<div class="css-map-custom" id="map{{mv_mapId}}"></div>

对应的打字稿是 -

this.map = new mapboxgl.Map({
container: `map${this.mv_mapId}`, .....

并且由于 "div id not found" 错误，我必须将地图渲染函数放在带有 setTimeout 的 ngOnInit 中:(

关于如何以更优雅的方式修复它的任何线索？

Answer 1

如果您需要在 "page load" 上访问 DOM，您应该使用 ngAfterViewInit 而不是 ngOnInit。

简而言之，这是事件的顺序：

构造器 > ... ngOninit > ... 模板创建 > ... ngAfterViewInit

Here is more info on the official docs on lifecycle hooks.