1

我已经使用 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 也做同样的事情。我这样做是正确的方式吗？

地图元素中还使用了 this.lLayers 字段...

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

1 回答 1

0

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

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

您正在修改this.lLayers标记单击事件的回调内部，这可能发生在 Angular 的区域之外。要让 Angular “看到”这个修改，你需要在 Angular 的区域内使用NgZone.run().

例如：

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);
}

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

于 2018-04-18T02:30:51.207 回答