在没有 ionic-native 的情况下在 ionicframework 中使用 cordova 插件答案

【问题标题】：Use cordova plugin into ionicframework without ionic-native在没有 ionic-native 的情况下在 ionicframework 中使用 cordova 插件
【发布时间】：2018-05-24 09:00:38
【问题描述】：

我找到了一个为 codova 制作的插件：
https://github.com/dff-solutions/dff-cordova-plugin-honeywell
该文档描述了如何直接使用对象 Honeywell，但没有描述如何导入 app.module 并进行适当的适配。我还没有找到关于 ionic 原生开发或 cordova 插件迁移到 ionic 2 的明确文档。
请提供有关如何将任何cordova 插件放入现代ionic 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( ... );
  }

}

【问题讨论】：

标签： ionic-framework ionic2 cordova-plugins

【解决方案1】：

在您需要的任何提供程序/页面顶部使用“霍尼韦尔”就足够了，无需修改 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 和相机）@987654321 @

honeywell-barcode-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();
        });
    }
}

插件工厂.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]
    },
]

【讨论】：