Подождите, пока будет создана асинхронная подписка - Angular

У меня есть два компонента: map.component и выбрать-координаты.component. Они оба являются братьями и сестрами и находятся в папке компонентов. У меня также есть служба, которая обменивается данными между компонентами.

В выбрать-координаты.ts в методе ngOnInit я получаю координаты из своей формы и отправляю эти координаты на карту компонентов с помощью службы.

выбрать-координаты.component.ts

ngOnInit() {
    const cords: Array<number> = [this.pointForm.get('X_WGS84').value, this.pointForm.get('Y_WGS84').value];
    this.mapService.setChangeCords(cords);
}

map.service.ts

getChangeCords(): Observable<Array<number>> {
    return this.changeCords.asObservable();
}

setChangeCords(cords) {
    this.changeCords.next(cords);
}

В map.component.ts я беру эти координаты и вызываю метод setView для элемента карта.

map.component.ts

this.mapService.getChangeCords().subscribe((cords: Array<number>) => {
    this.map.setView(latLng([cords[0], cords[1]]), 19);
});

Но в тот момент, когда я хочу вызвать метод setView(), this.map === undefined, поэтому я не могу вызвать метод setView().

ERROR TypeError: Cannot read property 'setView' of undefined

Переменная this.map инициализируется методом onMapReady():

onMapReady(map: Map) {
    this.map = map;
}

И этот метод есть в map.component.html (я использую ngx-leaflet)

<div
     leaflet
     [leafletLayers] = "layers"
     (leafletMapReady) = "onMapReady($event)"
     [leafletOptions] = "options">
</div>

Я хочу знать, можно ли остановить подписку, пока не будет создана переменная this.map. Я представляю себе это примерно так:

this.mapService.getChangeCords().subscribe((cords: Array<number>) => {
    if (this.map !== undefined){
        this.map.setView(latLng([cords[0], cords[1]]), 19);
    }
});

Или, может быть, можно инициализировать компонент выбрать-координаты.component как последний компонент - после map.component.

Потому что я хочу, чтобы элемент this.map был определен до того, как я вызову для него метод setView().

Разве вы не можете инициализировать choose-coordinates.component только после того, как компонент карты был инициализирован сам (то есть, когда onMapReady запускается)?

David 31.10.2018 12:22

Нет, потому что мое приложение довольно сложное. choose-Coordinates.component инициализируется в двух других компонентах, и это не всегда связано с инициализацией map.component. Я хочу всегда инициализировать map.component, но select-Coordinates.component я хочу инициализировать только при переходе по ссылке локальный: 4200 / домашний / редактировать / 8.

Paulina Półchłopek 31.10.2018 12:28

В качестве обходного пути вы можете сохранить координаты в блоке подписки, если this.map не установлен, а затем назначить координаты в onMapReady.

David 31.10.2018 12:31

Я не могу назначить координаты в onMapReady, потому что onMapReady вызывается один раз. Я хочу инициализировать и уничтожить компонент select -ordinate.com много раз. Проблема заключается только в том, что я хочу инициализировать select -ordinate.component в первый раз, когда map.component не создается. Когда я инициализировал select -ordinate.component в другой части моего приложения (не во время прямого входа по ссылке), проблем не возникало, потому что map.component был инициализирован ранее.

Paulina Półchłopek 31.10.2018 12:43

Думаю, то, что я предложил, сработает в этом сценарии. Сохранение координат будет полезно только в первый раз, если компонент карты IF не инициализирован. Но может я не понял ...

David 31.10.2018 14:39
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
5
76
0

Другие вопросы по теме