Angular中OpenLayers结合TypeScript调用函数报错求助

这个错误的根源很明确——普通匿名函数里的this指向不对！

你在给OpenLayers Map绑定click事件时用了普通的function()，这个函数内部的this会指向触发事件的OpenLayers Map对象，而不是你的Angular组件实例，所以自然找不到组件里定义的addMarker方法。

给你两种简单有效的解决办法：

方法1：使用箭头函数（最推荐） #

箭头函数不会创建自己的this，它会继承外层上下文的this（也就是你的组件实例），直接替换原来的匿名函数即可：

this.map.on('click', (e) => { 
  const x = transform(e.coordinate, 'EPSG:3857', 'EPSG:4326');
  this.addMarker(x[0], x[1]); 
});

方法2：手动绑定this #

如果你坚持要用普通函数，可以通过bind(this)把组件的this绑定到事件处理函数中：

this.map.on('click', function (e) { 
  const x = transform(e.coordinate, 'EPSG:3857', 'EPSG:4326');
  this.addMarker(x[0], x[1]); 
}.bind(this)); // 把组件的this绑定到当前函数

另外检查了你的addMarker方法，逻辑是没问题的，只要this.source是正确初始化的VectorSource实例，修改事件处理方式后就能正常调用添加标记的逻辑了。

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