Angular2 + Cordova + 条码扫描器插件：Android 行为

Question

我正在尝试使用带有 Cordova 和相关插件的 Angular2 应用程序上的条形码扫描仪。

我现在可以在 Android 上进行测试，但我遇到了奇怪的行为。无论是插件还是我的代码，我都找不到问题。

扫描工作正常，但从相机活动切换到应用 web 视图后，好像事件和数据绑定没有得到很好的处理。

当扫描返回结果时，我在视图上设置了一个属性来告诉应用程序扫描状态为成功，因此我的角度视图会显示一些按钮来打开链接。

有时有效，有时无效。此外，如果我重新扫描代码，然后取消它，留下相机活动，它会向我显示以前未显示的结果.. 或者有时根本不起作用:(

JAVASCRIPT：

export class ScanQRView extends View {

    private scanState: string = 'ready';


    [....]


    public scan(): void {

        if (this.utility.inApp('barcodeScanner')) {

            cordova.plugins.barcodeScanner.scan(
                (result) => {
                    setTimeout(() => {
                        if (!result.cancelled) {
                            this.onResult(result.text);
                            console.log(this.scanState);
                        } else {
                            this.onResult(false);
                        }
                    }, 500);
                },
                (error) => this.onResult(false), {
                    preferFrontCamera : true, 
                    showFlipCameraButton : true, 
                    showTorchButton : true,
                    torchOn: true, 
                    //prompt : "Place a barcode inside the scan area", 
                    resultDisplayDuration: 500, 
                    formats : "QR_CODE", 
                    disableAnimations : true,
                    disableSuccessBeep: false 
                }
            );
        }
    }


    public onResult(result: string|boolean): void {
        if (result === false) {
            this.scanState = 'error';
        } else {
            this.link = result.toString();
            this.scanState = 'success';
        }
    }


}

模板：

<div class="row scan" *ngIf="scanState == 'ready'">
    <div class="col-xs-3"></div>
    <div class="col-xs-6">
        <button type="button" class="btn btn-info btn-lg btn-block fade-in-out-button" (click)="scan()">
            <i class="fa fa-camera" aria-hidden="true"></i>
        </button>
    </div>
    <div class="col-xs-3"></div>
</div>


<div class="row scan" *ngIf="scanState == 'success'">
    <div class="col-xs-12">
        <div class="btn-group">
            <div class="btn-group">
                <button type="button" class="btn btn-info btn-lg" (click)="cancel()">
                    <i class="fa fa-refresh" aria-hidden="true"></i>
                </button>
            </div>
            <div class="btn-group">   
                <button type="button" class="btn btn-info btn-lg fade-in-out-button" (click)="openLink()">
                    <i class="fa fa-link" aria-hidden="true"></i> Apri
                </button>
            </div>
        </div>
    </div>
</div>

我尝试了使用和不使用计时器，没有任何变化.. 有人遇到过类似问题吗？

Answer 1

你可以使用 Promise ：

public scan(): void {
this.promiseScan().then(result => {
  this.resultQrcode = result;
}).catch((ex) => {
  console.log(ex);
});

}

public promiseScan(): any {
return new Promise((resolve, reject) => {
  cordova.plugins.barcodeScanner.scan(
    (result) => {
      return resolve(result.text);
    },
    (error) => {
      return reject('ERROR');
    }
  );
});

}