代码之家 › 专栏 › 技术社区 › Felipe Micali

Instascan二维码扫描仪“扫描”侦听器不会更新Angular 5组件视图

scanning qr-code typescript angular javascript

0

Felipe Micali · 技术社区 · 6 年前

我已经实现了Instascan( https://github.com/schmich/instascan

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

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”存在的情况下,然后单击“emit”,通过EventEmitter将扫描的内容发送到父组件:

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

问题是在“scan”事件回调中,“content”中的更改似乎没有应用于我的视图,而且我的“PROCEED”按钮也不可见。一个更奇怪的行为发生了:在我点击屏幕上的任何地方之后,这些更改就会应用到我的视图中。

我怎样才能克服这个问题?

1 回复 | 直到 6 年前

1

0

Felipe Micali 6 年前

我通过使用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的使用对应用程序性能/状态有何影响。

谢谢!