如何在 Angular 应用程序中订阅 setInterval()？

Question

I am trying to build an iOS location tracking app with the Ionic 5 Framework, Angular, and Cordova Geolocation Plugin.

I used to get user location changes with the watchPosition() function and it worked fine on Android devices. However, it does not work on iOS devices.

My new approach is to get the current location with the getCurrentPosition() function combined with setInterval(). To get an updated location every one or two seconds.

Unfortunately, I am getting following error now:

TypeError: this.watchLocationUpdates.subscribe is not a function

Anyone an Idea how to fix this?

  watchLocation() {
    const options = {
      maximumAge: 3600000,
      timeout: 5000,
      enableHighAccuracy: true,
    };
    this.isWatching = true;
    this.trackingId =  '-' + Math.random().toString(36).substr(2, 28);

    // Please find relevant setInterval() part below
    this.watchLocationUpdates = setInterval(() => { this.geolocation.getCurrentPosition(options); }, 1000);
    this.watchLocationUpdatesSub = this.watchLocationUpdates.subscribe((resp) => {
      this.geoLocations = resp.coords;
      this.geoLatitude = resp.coords.latitude;
      this.geoLongitude = resp.coords.longitude;
      this.geoAccuracy = Math.trunc(resp.coords.accuracy);
      this.timeStamp = resp.timestamp;

      const position = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
      this.map.setCenter(position);
      this.map.setZoom(16);

      this.markers.map(marker => marker.setMap(null));
      this.markers = [];
        const latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
        const marker = new google.maps.Marker({
          map: this.map,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 13,
            fillColor: '#1AA0EC',
            fillOpacity: 1,
            strokeColor: 'white',
            strokeWeight: 2
        },
          position: latLng
        });
        this.markers.push(marker);

      console.table('watchLocation function called', {
        trackingId: this.trackingId,
        latitude: this.geoLatitude,
        longitude: this.geoLongitude,
        accuracy: this.geoAccuracy,
        timeStamp: this.timeStamp,
        uId: this.uId
        });
      this.geolocationService.insertUserGeolocation({
        trackingId: this.trackingId,
        latitude: this.geoLatitude,
        longitude: this.geoLongitude,
        accuracy: this.geoAccuracy,
        timeStamp: this.timeStamp,
        uId: this.uId
        })
        .subscribe((response) => {
          localStorage.setItem('lastLocation', JSON.stringify({
            trackingId: this.trackingId,
            latitude: this.geoLatitude,
            longitude: this.geoLongitude,
            accuracy: this.geoAccuracy,
            timeStamp: this.timeStamp,
            uId: this.uId
            }));
          console.log(`user location data inserted in FB`, {
            trackingId: this.trackingId,
            latitude: this.geoLatitude,
            longitude: this.geoLongitude,
            accuracy: this.geoAccuracy,
            timeStamp: this.timeStamp,
            uId: this.uId
            });
        });
      });
  }```

Answer 1

You can use theinterval() from RxJS :

// RxJS v6+
import { interval } from 'rxjs';

const source = interval(1000);

source.subscribe(/* your logic here */);