无法在子组件

Question

我在使用来自不同组件的ID访问DOM元素时发现了Angular 4.4.6的问题。

在我的组件中，我想为某些用途绘制Google地图。如API中提供的示例所示，我通过在.html文件中包含以下内容来完成此操作：

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

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

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

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

但是，如果我想从另一个组件中使用此组件，如下所示：

<my-selector></my-selector>

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

  

错误类型错误：无法读取属性＆＃39; firstChild＆＃39;为null

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

Answer 1

问题是地图的组件是在Terdata Covalent步进器内部调用的，由于某种原因，它与加载顺序混合。

我们切换到角度matStepper的材质2，并遇到了通过在AfterViewInit中初始化地图而不是在OnInit上解决的相同问题。

AfterViewInit无法在Covaled步进器上工作。