Question

我已经实现了Instascan（https://github.com/schmich/instascan），以允许用户从Angular 5应用程序中读取QR码。

成功扫描后，我必须触发一些操作并相应地更新组件的视图。

我正在组件内部使用以下代码来检测相机并开始扫描：

cameras: Array<any> = []
selectedCamera: any
scanner: any
content: string

ngOnInit () {
    let vm = this
    Instascan.Camera.getCameras().then(function (cameras) {
      if (cameras.length > 0) {
        vm.cameras.push(...cameras)
      } else {
        console.error('No cameras found.')
      }
    }).catch(function (e) {
      console.error(e)
    })
  }

startScan () {
    let vm = this
    this.scanner = new Instascan.Scanner({
      video: this.videoContainer.nativeElement,
      backgroundScan: false,
      mirror: false
    })
    this.scanner.addListener('scan', function (content) {
      vm.content = content
    })
    this.selectedCamera = this.cameras[0]
    this.scanner.start(this.selectedCamera)
  }

在我的模板中，我有一个仅在'content'存在的情况下存在的元素，然后单击，通过EventEmitter将扫描的内容发送到父组件：

<div *ngIf="content" class="btn" (click)="emitContent()">
          PROCEED
        </div>

问题在于，在“扫描”事件回调中，“内容”中的更改似乎未应用于我的视图，并且“继续”按钮不可见。发生了甚至更奇怪的行为：单击屏幕上的任意位置后，这些更改将应用于我的视图。

我也尝试过在回调中使用ChangeDetectorRef.detectChanges（）方法并将'this'绑定到回调中，但两者均无法正常工作。

我该如何克服这个问题？

谢谢！

Answer 1

我已经设法通过使用NgZone来解决此问题：

import { NgZone } from '@angular/core'

constructor (
    private ngZone: NgZone
  ) {}

startScan () {
    this.scanner = new Instascan.Scanner({
      video: this.videoContainer.nativeElement,
      backgroundScan: false,
      mirror: false
    })
    this.scanner.addListener('scan', function (content) {
      this.ngZone.run(() => {
        this.content = content
      })
    }.bind(this))
    this.selectedCamera = this.cameras[0]
    this.scanner.start(this.selectedCamera)
  }

我不知道这是否是最好的解决方案，实际上我也不知道NgZone的使用如何影响应用程序的性能/状态。

如果有人知道更好的解决方案，将非常欢迎！

谢谢！

Instascan QR Code扫描仪的“扫描”侦听器不会更新Angular 5组件视图

1 个答案: