Я просто понимаю фреймворк Angular (6), его особенности и особенности. И есть одна вещь, которая мне может понадобиться, но, как кажется, она идет вразрез с парадигмами Angular - сервис, которому нужна ссылка на узел DOM.
Точнее - Компонент Esri Map. В его конструкторе требуется узел DOM - место, где будет располагаться карта. Поскольку карта будет центральным элементом приложения, она будет использоваться несколькими компонентами всего приложения. И для этого я хотел бы, чтобы это было в сервисе. Вопрос в том, как мне это сделать? Я решил это, но я хотел бы проверить его с более опытными разработчиками Angular.
Итак, у меня есть MapComponent, который был бы похож на одноэлементный компонент - включенный только один раз в приложение.
export class MapComponent implements OnInit {
@ViewChild('map') mapElement:ElementRef;
constructor(
private renderer2: Renderer2,
private mapService: MapService) { }
ngOnInit() {
// This is where I pass my DOM element to the service, to initialize it
this.mapService.init(this.mapElement.nativeElement);
}
}
И мой mapService, на который я буду ссылаться в других сервисах
@Injectable()
export class MapService {
private isInit:boolean = false;
private map: __esri.Map = null;
private mapView: __esri.MapView = null;
init(domElement: ElementRef) {
if (this.isInit) return Promise.resolve(); // A guard?
loadModules(["esri/Map", "esri/views/MapView", "esri/widgets/ScaleBar"])
.then(([Map, MapView, ScaleBar]) => {
this.map = new Map();
this.mapView = new MapView({
map: this.map,
container: domElement // This is where I need DOM element
});
})
.catch(err => {
// handle any errors
console.error(err);
})
.then(() => {
this.isInit = true;
});
}
}
Это действительно работает, мне просто интересно, будет ли это правильный способ сделать это. Я требую, чтобы эти объекты карты были доступны через другие компоненты, чтобы добавлять / удалять / изменять слои карты, рисовать / отображать геометрию и другие элементы карты.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я думаю, что это кажется подходящим подходом, если приложение имеет разумный размер, но я, если это приложение планирует сильно вырасти, я мог бы попытаться разделить всю логику визуализации карты в одном компоненте и передать события, изменяющие карту хранилище ngrx, чтобы логика кода была более управляемой и понятной, потому что, скажем, например, в конце у вас есть 100 способов изменить карту, и вы храните всю эту логику в этой единственной службе, это не будет хорошо.