订阅位置更新并推送到 BehaviorSubject 时无法读取未定义的属性

Question

因为我想在我的 Ionic 5/Capacitor 应用程序中使用位置信息，所以我围绕 Geolocation API.

编写了第一个包装器版本

问题是，当我注入此服务并调用 startReceivingLocationUpdates() 时，出现以下错误：

core.js:6014 ERROR TypeError: Cannot read property 'locationSubject' of undefined
    at locationCallback (location.service.ts:51)
    at window.navigator.geolocation.watchPosition.Object.enableHighAccuracy (geolocation.js:30)
    at ZoneDelegate.invoke (zone-evergreen.js:359)
    at Object.onInvoke (core.js:39699)
    at ZoneDelegate.invoke (zone-evergreen.js:358)
    at Zone.runGuarded (zone-evergreen.js:134)
    at zone-evergreen.js:118

我的定位服务


    import { Injectable } from '@angular/core';
    import { Geolocation, GeolocationOptions, GeolocationPosition } from '@capacitor/core';
    import { BehaviorSubject, Observable } from 'rxjs';

    const locationOptions: GeolocationOptions = {
      enableHighAccuracy: true,
      requireAltitude: false
    };

    @Injectable({
      providedIn: 'root'
    })
    export class LocationService {

      private locationSubject = new BehaviorSubject<GeolocationPosition>(null);

      private watchId: string = null;

      constructor() {
      }

      receivingLocationUpdates(): boolean {
        return this.watchId != null;
      }

      startReceivingLocationUpdates()
      {
        if(this.watchId !== null)
          return;

        this.watchId = Geolocation.watchPosition(locationOptions, this.locationCallback);
      }

      stopReceivingLocationUpdates()
      {
        if(this.watchId === null)
          return;

        Geolocation.clearWatch({id: this.watchId })
          .then(_ => {
            this.watchId = null;
          });
      }

      subscribe(): Observable<GeolocationPosition>
      {
        return this.locationSubject.asObservable();
      }

      private locationCallback(location: GeolocationPosition) {
        this.locationSubject.next(location);
      }
    }

我做错了什么？

Answer 1

这里的问题很可能是您丢失了 'this' 指向的内容，因为回调函数 (locationCallBack) 是在与您的 class.

不同的范围内执行的

要解决此问题，您应该绑定执行范围或使其透明。

尝试使用粗箭头函数：

  private locationCallback = (location: GeolocationPosition) => {
    this.locationSubject.next(location);
  }

或者您可以：

通过你的class的'this'范围
使用 .bind(this) 方法绑定 'this'

订阅位置更新并推送到 BehaviorSubject 时无法读取未定义的属性

Cannot read property of undefined when subscribing to location updates and pushing to BehaviorSubject

geolocation

typescript

ionic-framework

capacitor

ionic5

订阅位置更新并推送到 BehaviorSubject 时无法读取未定义的 属性

Cannot read property of undefined when subscribing to location updates and pushing to BehaviorSubject

geolocation

typescript

ionic-framework

capacitor

ionic5

订阅位置更新并推送到 BehaviorSubject 时无法读取未定义的属性