Angular2 + Cordova +條碼掃描器插件：Android行為

Question

我正在嘗試將我的Angular2應用程序上的條形碼掃描儀與Cordova和相關插件一起使用。

我現在可以在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');
    }
  );
});

}