Angular中navigator.geolocation调用函数时this指向错误致getData调用失败

这个错误的核心是**this指向丢失**。当你把showPosition作为回调传给navigator.geolocation.getCurrentPosition时，函数执行时的this不再指向你的Angular组件实例，而是变成了null（严格模式下），所以调用this.getData就会抛出"Cannot read properties of null"的错误。

解决方法1：用箭头函数绑定showPosition #

箭头函数会自动捕获当前上下文的this（即组件实例），修改showPosition的定义方式即可：

showPosition = (position: any) => {
  let g = position.coords.latitude;
  let f = position.coords.longitude;
  this.getData(g, f);
};

getLocation() {
  navigator.geolocation.getCurrentPosition(this.showPosition);
};

解决方法2：传递回调时用bind绑定this #

在传递showPosition给getCurrentPosition时，用bind强制将this绑定到组件实例：

showPosition(position: any) {
  let g = position.coords.latitude;
  let f = position.coords.longitude;
  this.getData(g, f);
};

getLocation() {
  navigator.geolocation.getCurrentPosition(this.showPosition.bind(this));
};

解决方法3：内联箭头函数作为回调 #

直接在getCurrentPosition中编写箭头函数回调，同样能保证this指向组件实例：

getLocation() {
  navigator.geolocation.getCurrentPosition((position) => {
    let g = position.coords.latitude;
    let f = position.coords.longitude;
    this.getData(g, f);
  });
};

你之前把getData内容移到showPosition里遇到HttpClient的问题，本质也是同一个原因——当时showPosition里的this不是组件实例，导致this.httpClient为undefined。解决this指向问题后，原有的getData函数可以正常使用，无需调整。

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