在离子中实施QR扫描仪

时间:2019-04-28 09:16:51

标签: angular ionic-framework qr-code

我是离子技术的新手,所以我对离子框架知识不多,我正在尝试实现Cordova-plugin-QR扫描仪,但是它在控制台上显示了以下错误。

enter image description here

有我的代码

import { Component, OnInit } from '@angular/core';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';

@Component({
  selector: 'app-notification',
  templateUrl: './notification.page.html',
  styleUrls: ['./notification.page.scss'],
})

export class NotificationPage implements OnInit {
    constructor(private qrScanner: QRScanner  ) {
    }

ngOnInit(){
  this.qrScanner.prepare()
  .then((status: QRScannerStatus) => {
     if (status.authorized) {
       // camera permission was granted


       // start scanning
       let scanSub = this.qrScanner.scan().subscribe((text: string) => {
         console.log('Scanned something', text);

         this.qrScanner.hide(); // hide camera preview
         scanSub.unsubscribe(); // stop scanning
       });

     } else if (status.denied) {
       // camera permission was permanently denied
       // you must use QRScanner.openSettings() method to guide the user to the settings page
       // then they can grant the permission from there
     } else {
       // permission was denied, but not permanently. You can ask for permission again at a later time.
     }
  })
  .catch((e: any) => console.log('Error is', e));
   }
}

1 个答案:

答案 0 :(得分:2)

您需要在app.module.ts中设置QRScanner提供程序

import { QRScanner } from '@ionic-native/qr-scanner/ngx';

@NgModule({
  ...

  providers: [
    ...
    QRScanner
    ...
  ]
  ...
})
export class AppModule { }