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

Question

我正在尝试使用*ngFor创建多个映射，但在组件内部div id 必须准备就绪，然后才能将其分配给 mapbox 的容器变量。不幸的是，如果未使用 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"错误，我必须使用 setTimeout :(将地图渲染函数放在 ngOnInit 中

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

Answer 1

如果需要在"页面加载"上访问 DOM，则应使用 ngAfterViewInit 而不是 ngOnInit。

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

构造函数>...恩奥尼特>...模板创建>...ngAfterViewInit

以下是有关生命周期钩子的官方文档的更多信息。