Вторая листовка из компонента не отображается

Question

Прежде чем вы начнете разбираться в этом, имейте в виду, что я только предоставил информацию / некоторый код о том, в чем проблема, потому что я не могу опубликовать весь свой код. Я надеюсь, что кто-то столкнулся с чем-то подобным и может дать мне советы / рекомендации, чтобы найти основную причину этой проблемы.

Объяснение структуры файла: У меня есть location-компонент , который используется в add- и edit- . Части добавления и редактирования являются модальными для вкладок инциденты и потребности работы на главной странице макет .

location-component показывает карту (скрытую по умолчанию), когда я нажимаю кнопку «Выбрать местоположение» или скрывает ее с помощью «Закрыть карту». Это все работает нормально, проблема в каком-то странном поведении, основанном на сценариях ...

Если я обновлю свой браузер, находясь на вкладке work-needs (таким образом, вкладка, отображаемая после обновления, соответствует потребностям работы), то ни add- , ни edit- модалы покажут карту.

Однако обновление браузера на вкладке инциденты работает правильно: карта отображается и скрывается, как и ожидалось.

Действительно странной частью является следующее поведение:

• Обновление рабочие потребности (карта не отображается для этих модалов добавления / редактирования)
• Нажмите на вкладку инциденты , которая не обновляет страницу (карта показывает эти модалы добавления / редактирования)
• Нажмите на вкладку work-needs еще раз, которая не обновляет страницу (карта СЕЙЧАС ПОКАЗЫВАЕТСЯ для этих модалов добавления / редактирования)

Я уже некоторое время ломал голову об этом, любая помощь будет признательна!

В HTML карта держится как обычно с листовкой:

<div id="map" class="mapEdit" [hidden]="!mapVisible"></div>

Вот компонент местоположения:

/*obviously there's more code in this component but these are the relevant
functions. The rest is just data unrelated to map passed around and displayed. I'll add more of my code if needed, but the map stuff is isolated
to this location-component*/
 
import { Component, OnChanges, EventEmitter, Output, forwardRef, Input, SimpleChanges, ChangeDetectorRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import * as Leaflet from "leaflet";
import { AppSettings } from '../../../shared/models';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-location',
  templateUrl: './location.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => LocationComponent),
      multi: true
    }
  ]
})
export class LocationComponent implements ControlValueAccessor, OnChanges {
  public location: any = {};
  public locationMap: string;

  constructor() { }
   
  @Output() change: EventEmitter<any> = new EventEmitter<any>();
  
  public mapVisible: boolean = false;
  public updatingMapImage: boolean = false;

  private map: any;
  private marker: any;

  ngOnInit() {
    this.loadMap(AppSettings.DEFAULT_LOCATION);
  }

  open() { //is called when the modal starts up
    this.resetMap();
    if (this.location.latitude && this.location.longitude) {
        this.setMarker([this.location.latitude, this.location.longitude]);
    }
  }

  // Map //

  showMap() {
    this.mapVisible = true;
  }

  closeMap() {
    this.mapVisible = false;
  }

  loadMap(center) {

    this.map = Leaflet
        .map('map')
        .setView(center, AppSettings.DEFAULT_MAP_ZOOM)
        .on("click", this.onMapClicked.bind(this));

    
Leaflet.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(this.map);
}

  resetMap() {
    if (this.map) {
        var location = AppSettings.DEFAULT_LOCATION;
        this.closeMap();
        this.removeMarker();
        this.map.setView(location);
    }
  }

  onMapClicked(event) {
    this.location.latitude = event.latlng.lat;
    this.location.longitude = event.latlng.lng;

    var location = [this.location.latitude, this.location.longitude]
    this.setMarker(location)
  }

  setMarker(location) {
    this.removeMarker();
    this.marker = Leaflet
        .marker(location)
        .addTo(this.map);
    this.map.setView(location);
  }

  removeMarker() {
      if (this.marker) {
          this.map.removeLayer(this.marker);
      }
  }

  ngOnChanges(changes: SimpleChanges) {

  }

  // Interface Implementation
  propagateChange = (_: any) => { };

  writeValue(value: any): void {
    this.location = value;

    if (this.location) {
      this.open();
    }
  }

  registerOnChange(fn) {
    this.propagateChange = fn;
  }

  registerOnTouched() { }
}