我发现 Angular 4.4.6 在通过其他组件的 ID 访问 DOM 元素时存在问题。
在我的组件中，我想为某些用途绘制 Google map 。如 API 中提供的示例所示，我通过在 .html 文件中包含以下内容来实现此目的:
<div id='map'></div>
在 .ts 文件中，我的 ngOnInit 函数中有以下内容:
...
var map = new google.maps.Map(document.getElementById('map'), {
...
}
...
这按预期工作，并显示了如果我按照路由组件中指定的方式直接加载组件，我可以使用的 map 。
但是，如果我想从另一个组件使用该组件，如下所示:
<my-selector></my-selector>
我在初始化 map 的行中收到以下错误。
ERROR TypeError: Cannot read property 'firstChild' of null
我错过了什么吗？我怀疑这与加载顺序有关，但我无法理解为什么它在一种情况下有效，而在另一种情况下无效。
最佳答案
问题是带有 map 的组件在 Terdata Covalent 步进器内被调用，由于某种原因，这与加载顺序发生了冲突。
我们切换到 Angular matStepper 的 Material 2，并遇到了通过在 AfterViewInit 中初始化 map 而不是在 OnInit 中初始化 map 解决的相同问题。
AfterViewInit 不适用于 Covaled 步进器。
关于javascript - 无法在子组件中加载 DOM 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48287859/