我正在尝试执行subscribe下面的函数,但就在这个完成的时候。我有两个组件,一个是principal o father组件,它从后端接收信息,另一个是grandchild组件,它从祖父那里得到过滤后的数据。
服务
在服务中,有在组件之间共享数据的功能,还有一个处理数据和根据需要分割数据的功能。
sendDataToMap(dataToMap: []) {
this.send_data.next(dataToMap);
}
reciveDataToMap(): Observable<any>{
return this.send_data.asObservable();
}
getDataToRenderOnMap(dataToMap){
dataToMap.forEach((data) => {
this.routesList.push(data?.mbl_vessels?.path);
const currentPos: number[] = Object.values(data?.mbl_vessels?.currentPosition);
this.pointsToFit.push(currentPos);
const marker: IMarker = {
transportType: data?.quote?.transportationMode,
currentPosition: currentPos
}
this.markersToRender.push(marker);
});
return {
routesList: this.routesList,
pointsToFit: this.pointsToFit,
markersToRender: this.markersToRender
}
}
父组件
在父组件中,有一个过滤具有此属性的数据并发送数组的过程。
this.elementsToMap = elementsReq.data.filter(item => item.hasOwnProperty('mbl_vessels'));
this.miniMapService.sendDataToMap(this.elementsToMap);
孙组件
接收数据,处理,并使用一个函数来获得我需要用来在Map上绘制路线和其他过程的数据。
ngAfterViewInit() {
this.loadMap(MapStyles.COLOR_STYLE);
this.loadMapControls();
this.prepareDataToMap();
//The idea is to execute the functions below once is finished the subscribe process end
//And return the data out of subscribe
this.setLineStyle(LinePathColor.TO_COLOR, geoData);
this.setCustomMarkers();
this.setMarkerForBounding(shipmentsDataPosition);
this.cdref.detectChanges();
}
prepareDataToMap(){
this.miniMapService.reciveDataToMap().subscribe((data) => {
this.dataToMap = data;
this.dataReturned = this.miniMapService.getDataToRenderOnMap(this.dataToMap);
});
}
setLineStyle(colorPath: string, route?) {
this.mapa.on('load', () => {
this.mapa.addSource('route', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': route
}
}
});
this.mapa.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': colorPath,
'line-width': 2,
"line-dasharray": [0.2, 2]
}
});
});
}
第一个控制台显示undefined,第二个显示数据,但这是因为是在subscribe里面。
在孙组件中接收到我获取的数据后,立即对其进行处理
1条答案
按热度按时间xlpyo6sf1#
如果你想在观察结束时执行某个操作,也许你可以尝试使用观察的完整方法
https://rxjs.dev/guide/observable
当发出完整的值时,运行Observables: Complete vs finally vs done方法