angular - 组件的第二张传单地图未显示

Question

在您开始调查之前，请注意我只提供了有关问题所在的信息/一些代码，因为我无法发布所有代码。我希望有人遇到过类似的事情，可以为我提供提示/指导，以找到这个问题的根本原因。

文件结构说明：我有一个用于添加和编辑组件的位置组件。添加和编辑部分是主布局页面 中事件和工作需求选项卡的模式。

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

如果我在工作需要选项卡上刷新浏览器（因此刷新后显示的选项卡是工作需要），添加或编辑模式都不会显示地图。

但是，在事件选项卡上刷新浏览器可以正常工作：地图按预期显示和隐藏。

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

• 刷新工作需求（这些添加/编辑模式不显示地图）
• 单击事件选项卡，该选项卡不会刷新页面（显示这些添加/编辑模式的地图）
• 再次单击工作需求选项卡，该选项卡不会刷新页面（现在显示这些添加/编辑模式的地图）

我一直在为此挠头，任何帮助将不胜感激！

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

标签： angularleafletcomponents