angular - 无法解析 LocationTracker 的所有参数

Question

我正在尝试遵循 Josh Morony 的示例代码， 但我似乎找不到如何解决这个问题。

我从控制台收到错误，它显示在网络浏览器上，甚至在设备上。

我已经添加了插件:

$ ionic cordova plugin add cordova-plugin-geolocation
$ npm install --save @ionic-native/geolocation
$ ionic cordova plugin add cordova-plugin-mauron85-background-geolocation
$ npm install --save @ionic-native/background-geolocation

这是错误消息

Uncaught Error: Can't resolve all parameters for LocationTracker: ([object Object], [object Object], [object Object], ?).at syntaxError (file:///android_asset/www/build/vendor.js:79310:34)
    at CompileMetadataResolver._getDependenciesMetadata (file:///android_asset/www/build/vendor.js:92647:35)
    at CompileMetadataResolver._getTypeMetadata (file:///android_asset/www/build/vendor.js:92515:26)
    at CompileMetadataResolver._getInjectableMetadata (file:///android_asset/www/build/vendor.js:92501:21)
    at CompileMetadataResolver.getProviderMetadata (file:///android_asset/www/build/vendor.js:92791:40)
    at file:///android_asset/www/build/vendor.js:92720:49
    at Array.forEach (native)
    at CompileMetadataResolver._getProvidersMetadata (file:///android_asset/www/build/vendor.js:92681:19)
    at CompileMetadataResolver.getNgModuleMetadata (file:///android_asset/www/build/vendor.js:92336:50)
    at JitCompiler._loadModules (file:///android_asset/www/build/vendor.js:103400:66)

pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LocationTracker } from '../../providers/location-tracker/location-tracker';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

constructor(public navCtrl: NavController, public locationTracker: LocationTracker) {

    this.startTracking();
  }

  startTracking(){
    this.locationTracker.startTracking();
  }

  stopTracking(){
    this.locationTracker.stopTracking();
  }
}

/pages/home/home.html

<ion-content padding>
  <ion-label>Current Latitude: {{locationTracker.lat}</ion-label>
  <ion-label>Current Longitude: {{locationTracker.lng}}</ion-label>
</ion-content>

/providers/location-tracker/location-tracker.ts

import { Injectable, NgZone } from '@angular/core';
import { BackgroundGeolocation } from '@ionic-native/background-geolocation';
import { Geolocation, Geoposition } from '@ionic-native/geolocation';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';

@Injectable()
export class LocationTracker {

  public watch: any;    
  public lat: number = 0;
  public lng: number = 0;

  constructor(public zone: NgZone, public backgroundGeolocation: BackgroundGeolocation, public geolocation: Geolocation, public geoposition: Geoposition) {

  }

  startTracking() {

    // Background Tracking

    let config = {
      desiredAccuracy: 0,
      stationaryRadius: 20,
      distanceFilter: 10, 
      debug: true,
      interval: 2000 
    };

    this.backgroundGeolocation.configure(config).subscribe((location) => {

      console.log('BackgroundGeolocation:  ' + location.latitude + ',' + location.longitude);

      // Run update inside of Angular's zone
      this.zone.run(() => {
        this.lat = location.latitude;
        this.lng = location.longitude;
      });

    }, (err) => {

      console.log(err);

    });

    // Turn ON the background-geolocation system.
    this.backgroundGeolocation.start();


    // Foreground Tracking

    let options = {
      frequency: 3000, 
      enableHighAccuracy: true
    };

    this.watch = this.geolocation.watchPosition(options).filter((p: any) => p.code === undefined).subscribe((position: Geoposition) => {

      console.log(position);

      // Run update inside of Angular's zone
      this.zone.run(() => {
        this.lat = position.coords.latitude;
        this.lng = position.coords.longitude;
      });

    });
  }

  stopTracking() {
   console.log('stopTracking');

    this.backgroundGeolocation.finish();
    this.watch.unsubscribe();
  }
}

应用程序/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { StatusBar } from '@ionic-native/status-bar';
import { LocationTracker } from '../providers/location-tracker/location-tracker';
import { BackgroundGeolocation } from '@ionic-native/background-geolocation';
import { Geolocation } from '@ionic-native/geolocation';


@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar
    {provide: ErrorHandler, useClass: IonicErrorHandler}
    LocationTracker,
    BackgroundGeolocation,
    Geolocation
  ]
})
export class AppModule {}

Answer 1

如果你看一下错误，它说第四个参数无法注入(inject)

Uncaught Error: Can't resolve all parameters for LocationTracker: ([object Object], [object Object], [object Object], ?)

从 Injectable 中查看代码

constructor(public zone: NgZone,
            public backgroundGeolocation: BackgroundGeolocation,
            public geolocation: Geolocation,
            public geoposition: Geoposition) {
}

第四个是这个 Geoposition，这似乎是您没有在 NgModule 中“提供”的。

因此，只要您不使用此“地理位置”实例/对象，您就可以简单地从构造函数中将其删除:

constructor(public zone: NgZone,
            public backgroundGeolocation: BackgroundGeolocation,
            public geolocation: Geolocation) {
}