在 Ionic 2 中，iBeacon 集成抛出“没有 IBeacon 提供程序”错误

Question

我正在尝试在 Ionic 2 应用程序中集成 ibeacon 功能。

我正在使用 https://ionicframework.com/docs/native/ibeacon/插件。

已按照文档中提到的步骤操作。

1. 创建了一个提供程序类。
2. 添加了插件集成。
3. 在主页中调用提供程序类。

但是在安卓设备上运行应用程序时，出现错误，

"导航失败：没有 IBeacon 的提供商！">

请提出任何修复建议。

谢谢。

信标提供程序类：

import { Injectable } from '@angular/core';
import { Platform, Events } from 'ionic-angular';
import { IBeacon } from '@ionic-native/ibeacon';

/*
  Generated class for the BeaconProvider provider.
// 
  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class BeaconProvider {
  delegate: any;
  region: any;
  constructor(public platform: Platform, public events: Events, private ibeacon : IBeacon) {
  }
  initialise(): any {
    let promise = new Promise((resolve, reject) => {
      // we need to be running on a device
      if (this.platform.is('cordova')) {
        // Request permission to use location on iOS
        this.ibeacon.requestAlwaysAuthorization();
        // create a new delegate and register it with the native layer
        this.delegate = this.ibeacon.Delegate();
        // Subscribe to some of the delegate’s event handlers
        this.delegate.didRangeBeaconsInRegion()
          .subscribe(
          data => {
            this.events.publish('didRangeBeaconsInRegion', data);
          },
          error => console.error()
          );
        // setup a beacon region – CHANGE THIS TO YOUR OWN UUID
        this.region = this.ibeacon.BeaconRegion('deskBeacon', 'E2C56DB5-DFFB-48D2-B060-D0F5A71096E0');
        // start ranging
        this.ibeacon.startRangingBeaconsInRegion(this.region)
          .then(
          () => {
            resolve(true);
          },
          error => {
            console.error('Failed to begin monitoring: ', error);
            resolve(false);
          }
          );
      } else {
        console.error('This application needs to be running on a device');
        resolve(false);
      }
    });
    return promise;
  }

}

在主页上，

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
import { LoginPage } from '../login/login';
import { BeaconProvider } from '../../providers/beacon-provider';
import { BeaconModel } from '../../models/beacon-module';
import { Platform, Events } from 'ionic-angular';
import { NgZone } from '@angular/core';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers : [BeaconProvider]
})

Answer 1

add

将 { IBeacon } 从 '@ionic-native/ibeacon' 导入到您的 app.module.ts

并将 IBeacon 添加到 app.module.ts 中的提供程序中。

这为我解决了问题。

Answer 2

(这是针对 Ionic 3 的，但过程与 Ionic 2 类似(

我建议你把IBeacon的定义放在app.module.ts provider列表中，就像这样

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    HttpClientModule,
     AngularFireDatabaseModule,
    AngularFireModule.initializeApp(config),
    AngularFireAuthModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    Api,
    Items,
    User,
    Camera,
    CardIO,
    NFC,
    Ndef,
    IBeacon,
    Stripe,
    SplashScreen,
    StatusBar,
    { provide: Settings, useFactory: provideSettings, deps: [Storage] },
    // Keep this to enable Ionic's runtime error handling during development
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    FirebaseProvider,
    BarcodeScanner,
    AuthProvider,
    BeaconProvider,
  ]
})
export class AppModule { }

Answer 3

您是否尝试过在home.ts的构造函数中添加该服务？

constructor(private myService: IBeacon ){
}