angular 5:如何知道我的地图在所有组件的构造函数中正确加载

Question

我有一个地图服务(maps.service.ts(，我在其中编写了一些加载地图的代码，比如

loadMap(target: string, extent?: number[], proj?: string) {
var self = this;
this._mapExtent = !extent ? [372728.74434305, 2677793.4448, 378257.6623, 2682126.61080438] : extent;
this.projection = proj || this.projection;
this._map = new OlMap({
layers: [
new OlTileLayer({
source: new olSourceOSM()
}),
//  layerWFS
],
target: target,            
view: new OlView({
center: this._mapExtent,
projection: this.projection,
maxZoom: 19,
zoom: 13
})
});
return new Promise((resolve, reject) => {
this._map.once('postrender', function (map) {
self.isMapLoaded = true;
resolve(map);
})
});
//return this._map.once('postrender').map(res => res.json());
}

以及一种getMap()方法，用于在整个应用程序中获取地图实例，

getMap() {
return this._map;
}

但在另一个控制器中，在构造函数中，我需要订阅映射更改事件，比如

constructor(){
self.mapService.getMap().on('moveend', (evt) => {
if (self.undoRedo === false) {
if (self.size < self.navHistory.length - 1) {
for (var i = self.navHistory.length - 1; i > self.size; i--) {
self.navHistory.pop();
}
}
self.navHistory.push({
extent: self.mapService.getMap().getView().calculateExtent(self.mapService.getMap().getSize()),
size: self.mapService.getMap().getSize(),
zoom: self.mapService.getMap().getView().getZoom()
});
self.size = self.size + 1;
}
});
}

但问题是，构造函数在加载映射之前加载，map正在获得undefined，有人能为这种情况提出最佳实践吗？我需要让getMap((方法返回promise并始终调用getMap(((.then((吗？

Answer 1

简单的答案是：当调用构造函数时，还没有可见的组件。这就是为什么"地图"是未定义的。看看OnInit挂钩。这就是你想做这些事情的地方。根据您实现一切的方式，您可能有机会使用Observables。基本上，您的getMap应该返回一个Observable，并且您的控制器在其构造函数中订阅它。类似于：

constructor(){
self.mapService.getMap()
.subscribe(map => map.on('moveend', (evt) => {
//your code here
}))
}

更一般地说：为什么要将可见组件封装到服务中？服务并不是为了这个。您可能应该考虑创建一个封装OL的Map组件。