通过 Leaflet marker.on('click', ...) 访问 Angular 组件变量

Question

我正在使用 ngx-leaflet 在 Angular 应用程序中呈现地图。我在单击时使用 EventListener 向图层添加标记，如下所示：

questions.forEach((question) => {
  this.layers.push(
    marker([question.lat, question.lng], {
      icon: icon({
        iconSize: [25, 41],
        iconAnchor: [13, 41],
        iconUrl: 'assets/marker-icon.png',
        shadowUrl: 'assets/marker-shadow.png'
      })
    }).on('click', this.onClick)
  );
});

onClick 为：

onClick(e) {
  this.showQuestion = true;
  console.log('data: ', e);
}

我希望点击标记将 showQuestion 布尔值设置为 true，但是 this 的上下文与 Angular 组件无关，而是与 Leaflet 事件相关。

如何访问 Angular 组件 this 而不是 Leaflet this？

Answer 1

最简单的方法是使用 bind 创建具有显式 this 上下文的函数。请参阅以下示例：

questions.forEach((question) => {
  this.layers.push(
    marker([question.lat, question.lng], {
      icon: icon({
        iconSize: [25, 41],
        iconAnchor: [13, 41],
        iconUrl: 'assets/marker-icon.png',
        shadowUrl: 'assets/marker-shadow.png'
      })
    }).on('click', this.onClick.bind(this))
  );
});

在此示例中，将调用 onClick 处理程序，并将 this 设置为 this 在评估对绑定的调用时所指的任何内容（我假设您的示例将是ngx 组件）。

通过 Leaflet marker.on('click', ...) 访问 Angular 组件变量

Accessing Angular component variable via Leaflet marker.on('click', ...)

ngx-leaflet