Angular中Leaflet地图点击回调如何访问MapComponent组件成员

问题原因 #

普通函数作为事件回调传递给Leaflet时，Leaflet会将回调的this绑定为地图实例，因此无法访问MapComponent的成员属性，以下是几种可行的解决方案：

解决方案 #

方案1：将回调函数定义为箭头函数（最推荐） #

箭头函数的this继承自定义时的词法上下文，天然绑定组件实例，不需要额外修改绑定逻辑。
修改onMapClick的定义即可：

onMapClick = (e: LeafletMouseEvent) => {
  console.log(this.name);
}

原绑定逻辑map.on('click', this.onMapClick)无需改动。如果后续需要解绑事件，直接用this.onMapClick作为回调引用即可，使用更便捷。

方案2：绑定时用bind显式指定this指向 #

在绑定事件时通过bind方法将回调的this永久绑定为当前组件实例：
修改ngAfterViewInit中的绑定代码：

map.on('click', this.onMapClick.bind(this));

如果需要解绑事件，需要提前存储bind返回的新函数引用：

// 组件内先声明存储回调引用的变量
private mapClickHandler: (e: LeafletMouseEvent) => void;

// 绑定时存引用
this.mapClickHandler = this.onMapClick.bind(this);
map.on('click', this.mapClickHandler);

// 解绑时用存储的引用
map.off('click', this.mapClickHandler);

方案3：用匿名箭头函数包装回调 #

绑定事件时用箭头函数包裹原回调，利用箭头函数的this指向组件实例的特性，正常调用原方法：

map.on('click', (e: LeafletMouseEvent) => this.onMapClick(e));

该方案的缺点是匿名函数没有引用，不方便后续解绑事件，适合不需要解绑的场景。

内容的提问来源于stack exchange，提问作者ThiloOS