Estoy usando la geolocalización HTML 5 dentro de un componente Angular:
... export class AngularComponent { ... constructor(private db: DatabaseService) {} // this function is assigned to an HTML button logCoords(message, action) { navigator.geolocation.getCurrentPosition(this.success, this.error, this.options); } success(pos) { function time() { ... } var crd = pos.coords; var lat = crd.latitude var long = crd.longitude let newCoordinates = {'lat': lat, 'long':long, 'time': time} this.db.addLocation(newCoordinates) } ... } ...Quiero almacenar el resultado del método getCurrentPosition dentro de la base de datos indexada usando un servicio Angular pero no puedo acceder a ninguna propiedad de la clase de componente (this.db es nulo).
¿Por qué no puedo acceder a this.db dentro de la función de éxito y cómo puedo solucionar esto?
Porque pierdes this contexto al pasar el método como una devolución de llamada. Puede solucionar esto de varias maneras:
logCoords(message, action) { // bind context navigator.geolocation.getCurrentPosition(this.success.bind(this), this.error.bind(this), this.options); }o
logCoords(message, action) { navigator.geolocation.getCurrentPosition(this.success, this.error, this.options); success = (pos) => {} // <= arrow function error = () => {} // <= arrow function }El problema es con la siguiente línea:
navigator.geolocation.getCurrentPosition(this.success, this.error, this.options); En la línea anterior, solo está pasando this.success como devolución de llamada sin establecer el contexto. Entonces, en este caso, según los principios de JavaScript, this siempre se referiría al objeto de la ventana mientras espera la referencia del componente.
Para solucionar esto, debe establecer el contexto (instancia del componente) antes de pasar this.success y, para ese propósito, javascript proporcionó la función bind().
Pruebe el siguiente código (solución muy simple) -
navigator.geolocation.getCurrentPosition(this.success.bind(this), this.error.bind(this), this.options);Para obtener más detalles sobre la función bind (), consulte el siguiente enlace:
https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_objects/Function/bind