Служба Angular Injectable, зависящая от элемента DOM - PullRequest
0 голосов
/ 01 июня 2018

Я только что понял Angular (6), его особенности и особенности.И есть одна вещь, которая мне понадобится, но, как кажется, она идет вразрез с угловыми парадигмами - сервисом, который нуждается в ссылке на узел 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;
            });
    }
}

Это работает, я просто удивляюсь, это будет правильный способ сделать это.Мне нужно, чтобы эти объекты карты были доступны через другие компоненты, чтобы добавлять / удалять / изменять слои карты, рисовать / отображать геометрию и другие элементы карты.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...