ionic2 离子原生和科尔多瓦插件陀螺仪错误

Question

我有一个ionic2应用程序，我想将陀螺仪与离子原生和cordova插件陀螺仪一起使用，就像这样的教程：

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';
      }
    });
  }
}

关键是readySource检查dom(浏览器(或cordova(模拟器/设备(。

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

浏览器中的应用