ionic2离子本机和cordova-plugin-gyroscope错误 [英] ionic2 ionic native and cordova-plugin-gyroscope error

问题描述

我有一个ionic2应用程序，我想使用陀螺仪与离子本机和cordova-plugin-gyroscope像这样的tutoriel：

i have an ionic2 apps and i want to use Gyroscope with ionic native and cordova-plugin-gyroscope like this tutoriel :

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


      });

  }

}

不能你帮帮我

推荐答案

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

Please note this plugin will only work on real hardware, assuming your error is visible you are using a browser instead of emulator or real device.

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 （模拟器/设备）。

Crucial thing is readySource checking for either dom (browser) or cordova (emulator/device).

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

Unfortunately documentation is missing clear tips for beginners how to handle 'hardware' plugins. Take a look at the image with the app used in the browser.

浏览器中的应用程序

这篇关于ionic2离子本机和cordova-plugin-gyroscope错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！