Instascan QR Code scanner 'scan‘listener不会更新Angular 5组件视图

Question

我已经实现了即时扫描(https://github.com/schmich/instascan)，允许用户从我的Angular 5应用程序中读取二维码。

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

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

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的使用如何影响应用程序的性能/状态。

如果有人知道更好的解决方案，那将是受欢迎的！

谢谢!