angular - ionic 2 条码扫描器

Question

我尝试使用 ionic2 在 Android 移动设备中使用条码扫描仪扫描条码。我是 ionic 的新学习者。我尝试了一些代码，

home.ts

  import { Component } from '@angular/core';

  import { NavController } from 'ionic-angular';
  declare var cordova:any;
  @Component({
  selector: 'page-home',
  templateUrl: 'home.html'
  })
  export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  scan() {
  var me = this;
  if (cordova.plugins.barcodeScanner) {
    cordova.plugins.barcodeScanner.scan((imageData) => {
        alert(imageData.text);

    }, (error) => {
        alert("An error happened -> " + error);         
    });
  }

  }
  }

home.html

  <ion-navbar *navbar>
  <ion-title>
    Home
  </ion-title>
  </ion-navbar>

 <ion-content class="home">
 <button primary (click)="scan()">Scan</button>
 </ion-content>

但我收到错误“找不到变量:Cordova”。

我使用了这个插件 -

https://ionicframework.com/docs/v2/native/barcode-scanner/

用于 ionic2 中的条码扫描仪

谢谢您的回答。

Answer 1

您需要添加:

import { BarcodeScanner } from 'ionic-native';

之后，您可以使用 BarcodeScanner.scan() 方法从条形码或二维码中获取信息。试试这个代码: 主页.ts

import { Component } from '@angular/core';    
import { NavController } from 'ionic-angular';
import { BarcodeScanner } from 'ionic-native';

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

  constructor(public navCtrl: NavController) {}

  click() {
    BarcodeScanner.scan()
      .then((result) => {
        alert(
          "We got a barcode\n" +
          "Result: " + result.text + "\n" +
          "Format: " + result.format + "\n" +
          "Cancelled: " + result.cancelled
        )
      })
      .catch((error) => {
        alert(error);
      })
  }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h1>Scan</h1>
  <button block (click)="click()" color="primary">Scan</button>
</ion-content>