ionic2 ionic native和cordova-plugin-陀螺仪错误

Question

我有一个ionic2应用程序，我想将陀螺仪与ionic native和cordova-plugin-gyroscope一起使用，如下教程所示：

https://ionicframework.com/docs/native/gyroscope/

但是我有这个错误

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'watch' of undefined
TypeError: Cannot read property 'watch' of undefined
    at Observable._subscribe 

..。

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Gyroscope, GyroscopeOrientation, GyroscopeOptions } from '@ionic-native/gyroscope';

import { Platform } from 'ionic-angular';
import {geoCompassService} from '../../services/geocompass'
import * as Leaflet from "leaflet";

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

  pointGps:any;
  angle:any;
  distance:any;
  orientation:any;

  constructor(private platform: Platform,
              public navCtrl: NavController, 
              public _geoCompassService:geoCompassService,
              private gyroscope: Gyroscope) {

      platform.ready().then(() => {
         console.log("platform ready !!!");
          this.pointGps=this._geoCompassService.getPointGps();
          this.angle = (Math.atan2(0,1) - Math.atan2(( this.pointGps.coordB.lng -  this.pointGps.coordA.lng),                                                    ( this.pointGps.coordB.lat -  this.pointGps.coordA.lat)))*180/Math.PI+180;    
          this.distance = Leaflet.latLng( this.pointGps.coordA).distanceTo(this.pointGps.coordB);




          //Gyro
          let options: GyroscopeOptions = {
          frequency: 1000
          };

          this.gyroscope.getCurrent(options)
                        .then((orientation: GyroscopeOrientation) => {
              this.orientation=orientation
              console.log("orientation "+this.orientation.x)
            })
            .catch()

          this.gyroscope.watch()
                          .subscribe((orientation: GyroscopeOrientation) => {
                this.orientation=orientation
          });


      });

  }

}

你不能帮我吗

Answer 1

请注意，这个插件只能在真实的硬件上工作，假设你的错误是可见的，你使用的是浏览器，而不是模拟器或真实设备。

import { Component } from '@angular/core';
import { Gyroscope, GyroscopeOrientation, GyroscopeOptions } from '@ionic-native/gyroscope';
import {Platform} from "ionic-angular";

@Component({
  selector: 'off-gyroscope',
  templateUrl: 'gyroscope.html'
})
export class GyroscopeComponent {

  options: GyroscopeOptions = {
    frequency: 100
  };
  orientation: GyroscopeOrientation;
  x: string;
  y: string;
  z: string;

  constructor(public plt: Platform, private gyroscope: Gyroscope) {
    plt.ready().then((readySource) => {

      if (readySource == 'cordova') {
        this.gyroscope.watch(this.options)
          .subscribe((orientation: GyroscopeOrientation) => {
            this.orientation = orientation;
            this.x = orientation.x.toString();
            this.y = orientation.y.toString();
            this.z = orientation.z.toString();
          });
      }
      else {
        this.x = 'Not a real device';
        this.y = 'Not a real device';
        this.z = 'Not a real device';
      }
    });
  }
}

关键的事情是对dom (浏览器)或cordova (模拟器/设备)进行readySource检查。

不幸的是，文档中缺少给初学者如何处理“硬件”插件的明确提示。看看浏览器中使用的应用程序的图像。

App in the browser