ngx-leaflet - 通过 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 Boolean 设置为 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 组件）。