组件的第二个传单图未显示

Question

在开始研究此问题之前，请注意我只是提供了有关问题所在的信息/一些代码，因为我无法发布所有代码。我希望有人遇到类似问题，并且可以为我提供提示/指导，以找到导致此问题的根本原因。

文件结构说明：我有一个位置组件，用于 add-和 edit-组件。添加和编辑部分是布局主页中事件和工作需要标签的模式。

当我单击“选择位置”按钮或使用“关闭地图”将其隐藏时，location-component将显示一个地图（默认情况下为隐藏）。一切正常，问题在于一些基于场景的奇怪行为...

如果在工作需要标签上刷新浏览器（因此刷新后显示的标签是工作需要），则 add-或 edit-模态将显示地图。

但是，刷新突发事件标签上的浏览器可以正常工作：地图按预期显示和隐藏。

真正奇怪的部分是以下行为：

• 刷新工作需要（这些添加/编辑模式不显示地图）
• 点击事件标签，该标签不会刷新页面（这些添加/编辑模式的地图正在显示）
• 再次点击工作需要标签，该标签不会刷新页面（这些添加/编辑模式的地图现在正在显示）

我已经为此花了一段时间，任何帮助将不胜感激！

在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() { }
}