javascript - 无法在子组件中加载 DOM 元素

Question

在通过 ID 从不同组件访问 DOM 元素时，我发现 Angular 4.4.6 存在问题。

在我的组件中，我想为某些用途绘制谷歌地图。如 API 中提供的示例所示，我通过在 .html 文件中包含以下内容来做到这一点：

<div id='map'></div>

在 .ts 文件中，我的ngOnInit函数中有以下内容：

...
var map = new google.maps.Map(document.getElementById('map'), {
   ...
}
...

这按预期工作，并显示了如果我按照路由组件中的指定直接加载组件时可以使用的地图。

但是，如果我想从其他组件中使用此组件，如下所示：

<my-selector></my-selector>

我在初始化地图的行中收到以下错误。

错误类型错误：无法读取 null 的属性“firstChild”

我错过了什么吗？我怀疑它与加载顺序有关，但我不明白为什么它在一种情况下有效，而在另一种情况下无效。

score 1 · Accepted Answer

问题是带有地图的组件在 Terdata Covalent 步进器中被调用，由于某种原因，它与加载顺序相混淆。

我们切换到 Angular matStepper 的材质 2 并面临同样的问题，该问题通过在 AfterViewInit 而不是 OnInit 中初始化地图来解决。

AfterViewInit 在 Covaled 步进器上不起作用。

1 回答 1