Angular 使用带有角度的MapBox GL JS-错误：无效类型：‘；集装箱’；必须是字符串或HtmleElement

我正在使用mapbox gl进行一个角度项目，我想将当前位置添加到地图中。我仔细考虑了他们的文档，找到了一种方法，但是代码在我的angular项目中不起作用。它总是给我上面的错误。请我是地图盒的新手，请帮助我

从'@angular/core'导入{Component，OnInit，AfterViewInit}；
从“mapbox gl”导入mapboxgl；//或“const mapboxgl=require（'mapbox-gl'）
@组成部分({
选择器：“应用程序主页”，
templateUrl:“./home.component.html”，
样式URL:['./home.component.css']
})
导出类HomeComponent实现OnInit{
构造函数（）{
mapboxgl.accessToken=
“api密钥”
常量映射=新的mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v11“，//样式表位置
中心：[79.861244,6.927079]，//起始位置[lng，lat]
缩放：9//开始缩放
});
}
ngOnInit（）：void{
}
}

---

嘿，伙计们，我找到了一个解决方案，首先我们必须等待视图初始化，因此我们必须使用AfterViewInit接口实现我们的HomeComponet。之后，我们可以使用javascript访问DOM对象，根据Mapbox GL documentation container属性，应该是一个html元素，因为我们必须访问要呈现地图对象的元素，并且我们必须使用angular type断言将其转换为html对象

从'@angular/core'导入{Component，OnInit，AfterViewInit}；
从“mapbox gl”导入mapboxgl；//或“const mapboxgl=require（'mapbox-gl'）
@组成部分({
选择器：“应用程序主页”，
templateUrl:“./home.component.html”，
样式URL:['./home.component.css']
})
导出类HomeComponent实现OnInit，AfterViewInit{
mapContainer:HtmleElement；
构造函数（）{
}
ngOnInit（）：void{
}
ngAfterViewInit（）{
this.mapContainer=（document.getElementById（'map'）；
mapboxgl.accessToken=
“api密钥”
常量映射=新的mapboxgl.map({
容器：this.mapContainer，
风格：'mapbox://styles/mapbox/streets-v11“，//样式表位置
中心：[79.861244,6.927079]，//起始位置[lng，lat]
缩放：9//开始缩放
});
}
}