Question

我使用angular5和ngx-leaflet（https://github.com/Asymmetrik/ngx-leaflet）设置我的应用程序。

我从空白地图开始。当用户单击按钮时，标记将显示在地图上。当用户选择标记时，该标记被识别到一个国家，并且该国家基于一些其他（非重要）数据与其他国家链接。

<div id="map-sidebar">
    <div class="map-buttons-bar">
        <button class="btn btn-primary" (click)="addLayer()">Set Marker</button>
    </div>
</div>

在我的.ts文件中，我有

addLayer(){
    var n_marker = marker([38.9072, -77.0369], {icon: this.anomalyIcon});
    n_marker.on('click', (e)=>{             
        this.mapToPartnerCountries();
    })
    this.lLayers.push(n_marker);
  }

mapToPartnerCountries(){

    var n_marker = marker([39.9072, -78.0369], {icon: this.anomalyIcon});
    this.lLayers.push(n_marker); 
    //var newLayer = geoJSON(geo as any);
    //this.lLayers.push(newLayer);
  }

我的问题是运行mapToPartnerCountries（）方法时不会出现新图层。但如果我再次单击该按钮，则会出现。 GeoJson做同样的事情。我这样做是正确的吗？

此map.lLayers字段也用于地图元素......

<div class="map-container" 
            leaflet 
            [leafletOptions]="mapOptions" 
            [leafletLayersControl]="layersControl"
            [leafletLayers]="lLayers"
        >

Answer 1

Angular使用区域来确定哪些事件执行和不触发更改检测。从模板传播的任何事件（例如，（单击）事件）都将触发更改检测，除非您没有特别配置它。这就是为什么当您再次单击时，将应用更改。

有意设置传单事件发生在Angular区域之外（由于各种原因，但主要与性能有关）。您可以阅读更多here。如果更改是在Angular区域之外进行的，Angular不会检测到对组件属性所做的任何更改。

您正在修改Marker点击事件回调中的this.lLayers，这可能发生在Angular的区域之外。让Angular进入＆＃34;看＆＃34;修改后，您需要使用NgZone.run()在Angular的区域内执行此操作。

例如：

constructor(private zone: NgZone) {}

addLayer(){
   var n_marker = marker([38.9072, -77.0369], {icon: this.anomalyIcon});
   n_marker.on('click', (e) => {

      this.zone.run(() => {         
         this.mapToPartnerCountries();
      });

   })
   this.lLayers.push(n_marker);
}

该代码将确保在Angular的区域内运行this.mapToPartnerCountries();，以便执行更改检测。

使用带有ngx-leaflet

1 个答案: