geoJSON onEachFeature 鼠标事件

Question

我在尝试对 geoJSON 层使用 onEachFeature 方法时遇到问题。我尝试为每个功能分配一个点击监听器。问题是当我点击一个功能时我总是会得到这个错误：

Uncaught TypeError: Cannot read property 'detectChanges' of undefined

我能想到这是因为层是在构造函数运行之前分配的，但是在 ngOnInit 函数中这样做也不起作用。如果有一个好的方法会很酷:)

  constructor(private changeDetector: ChangeDetectorRef){}

  fitBounds: LatLngBounds;
  geoLayer = geoJSON(statesData, {onEachFeature : this.onEachFeature});

  onEachFeature(feature , layer) {
    layer.on('click', <LeafletMouseEvent> (e) => {
        this.fitBounds = [
            [0.712, -74.227],
            [0.774, -74.125]
        ];
        this.changeDetector.detectChanges();
    });
  }

  layer: Layer[] = [];
  fitBounds: LatLngBounds;
  
  onEachFeature(feature , layer : geoJSON) {
    layer.on('click', <LeafletMouseEvent> (e) => {
        console.log("tets"+e.target.getBounds().toBBoxString());
        this.fitBounds = [
            [0.712, -74.227],
            [0.774, -74.125]
        ];
        this.changeDetector.detectChanges();
    });
  }
  
constructor(private changeDetector: ChangeDetectorRef){}

ngOnInit() {
      let geoLayer = geoJSON(statesData, {onEachFeature : this.onEachFeature});
      this.layer.push(geoLayer);
}

Answer 1

您需要确保在回调中可以访问正确的 this。您可以使用 Javascript 中的 function.bind() 执行此操作。参见：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

constructor(private changeDetector: ChangeDetectorRef){}

fitBounds: LatLngBounds;
geoLayer = geoJSON(statesData, {
    // Need to bind the proper this context
    onEachFeature : this.onEachFeature.bind(this)
});

onEachFeature(feature , layer) {
  // 'this' will now refer to your component's context
  let that = this;

  layer.on('click', <LeafletMouseEvent> (e) => {
      that.fitBounds = [
          [0.712, -74.227],
          [0.774, -74.125]
      ];

      // Aliased 'that' to refer to 'this' so it is in scope
      that.changeDetector.detectChanges();
  });

}

let that = this 技巧是确保您在 click 事件处理程序上不会遇到同样的问题。但是，您也可以使该处理程序成为 class 中的一个函数，并使用绑定来设置 this.

geoJSON onEachFeature 鼠标事件

geoJSON onEachFeature Mouse Event

leaflet

ngx-leaflet

angular5