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设置为评估调用bind时所指的this所指的任何内容（我假设您的示例将是ngx组件）。

通过Leaflet marker.on访问Angular组件变量（＆＃39;点击＆＃39;，...）

1 个答案: