将cordova插件用于离子框架,无离子原生

时间:2017-12-10 19:46:31

标签: ionic-framework ionic2 cordova-plugins

我找到了为codova制作的插件:
https://github.com/dff-solutions/dff-cordova-plugin-honeywell
该文档描述了如何直接使用霍尼韦尔对象,而不是如何导入app.module并进行适当的调整。 我没有找到关于离子天然发育或cordova插入物向离子2迁移的明确文献 请关于如何将任何cordova插件导入现代离子2 的任何指导 更新:在我的情况下有workarounds,因为我有一个由插件创建的全局变量,我在@Component装饰器之前声明了变量。但这个技巧打破了依赖注入系统。

import { Component, NgZone } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var Honeywell;//declare the global created by the plugin

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  barcode: string;
  constructor(public navCtrl: NavController, public zone: NgZone) {
        Honeywell
          .onBarcodeEvent( ... );
  }

}

1 个答案:

答案 0 :(得分:4)

使用霍尼韦尔'在你需要它的任何提供者/页面的顶部应该是足够的,没有必要修改app.module.ts,它不是Angular可以处理的依赖。

declare let Honeywell: any;

但是我创建了一个TypeScript文件来存根方法并调用插件

import { Injectable } from '@angular/core';
import { IonicNativePlugin } from '@ionic-native/core';
declare let Honeywell: any;

@Injectable()
export class HoneywellBarcodeScanner extends IonicNativePlugin {    
    onLog(success, error, args?): Promise<any> { 
        return Honeywell.onLog(success, error, args);
    }

    onBarcodeEvent(success, error, args?): Promise<any> { 
        return Honeywell.onBarcodeEvent(success, error, args);
    }

    onFailureEvent(success, error, args?): Promise<any> { 
        return Honeywell.onFailureEvent(success, error, args); 
    }

    barcodeReaderPressSoftwareTrigger(success, error, args?): Promise<any> { 
        return Honeywell.barcodeReaderPressSoftwareTrigger(success, error, args); 
     }    
}

如果您感兴趣我然后嘲笑插件将与Ionic Serve一起使用(选择模拟条形码并调用条形码扫描事件),这里有一个完整的例子(使用3种类型的条形码扫描仪,linea,honeywell和相机)https://github.com/domisginger/ionic-cordova-barcode-examples

霍尼韦尔-条形码scanner.mock.ts

import { HoneywellBarcodeScanner } from './../plugin-interfaces/honeywell-barcode-scanner';

export class HoneywellBarcodeScannerMock extends HoneywellBarcodeScanner {    
    onLog(): Promise<any> {
        return new Promise((resolve, reject) => {
            resolve();
        });
    }

    onBarcodeEvent(): Promise<any> {
        return new Promise((resolve, reject) => {
            resolve();
        });
    }

    onFailureEvent(): Promise<any> {
        return new Promise((resolve, reject) => {
            resolve();
        });
    }

    barcodeReaderPressSoftwareTrigger(): Promise<any> {
        return new Promise((resolve, reject) => {
            resolve();
        });
    }
}

插件-factories.ts

import { Platform } from "ionic-angular/platform/platform";
import { AlertController } from "ionic-angular";
import { HoneywellBarcodeScanner } from "./honeywell-barcode-scanner";
import { HoneywellBarcodeScannerMock } from "./../mocks/honeywell-barcode-scanner.mock";

let isMobile = (platform: Platform): boolean => {
    return platform.is('ios') || platform.is('android');
}

export let PluginFactories = {
    honeywellBarcodeScannerFactory:  (platform: Platform) => { 
        return isMobile(platform) ? new HoneywellBarcodeScanner() : new HoneywellBarcodeScannerMock();
    }
}

然后在app.module.ts

providers: [
    {
      provide: HoneywellBarcodeScanner, 
      useFactory: PluginFactories.honeywellBarcodeScannerFactory,
      deps: [Platform]
    },
]