时间戳

首页 > 解决方案 > 如何在启动 Angular MatBottomSheet 之前加载相机数据

html - 如何在启动 Angular MatBottomSheet 之前加载相机数据

问题描述

我想将二维码扫描器 ( https://github.com/zxing-js/ngx-scanner ) 嵌入到我的 Angular 应用程序的底部工作表中。要获取我在扫描组件（底页）中使用的相机信息，请使用以下代码：

@ViewChild('scanner')
scanner:ZXingScannerComponent;
hasCameras = false;
hasPermission: boolean;
availableDevices: MediaDeviceInfo[];
selectedDevice: MediaDeviceInfo;
ngOnInit() {
this.scanner.camerasFound.subscribe((devices: MediaDeviceInfo[]) => {
  this.hasCameras = true;

  console.log('Devices: ', devices);
  this.availableDevices = devices;

  //select camera if only one is available
  if (this.availableDevices.length <= 1) {
    this.selectedDevice = this.availableDevices[0];
  }
  else {
    //selects the devices's back camera by default
    for (const device of devices) {
      if (/back|rear|environment/gi.test(device.label)) {
        this.scanner.changeDevice(device);
        this.selectedDevice = device;
        break;
      }
    }
  }
  console.log('selected Device: ' + this.selectedDevice);
});}

不幸的是，在渲染底部表格之前，我没有通过订阅获取相机数据，因此扫描仪无法工作，因为当时没有可用的相机数据。

我的扫描组件的 html （底页）：

  <zxing-scanner #scanner class="scanner" start="true" [device]="selectedDevice" (scanSuccess)="handleQrCodeResult($event)"></zxing-scanner>

调用扫描组件的组件的html：

  scan() {

const scanSheet = this.bottomSheet.open(ScanningComponent, {
  panelClass: 'bottomSheet'
}); }

有人已经面临这个问题了吗？

更新： 我通过调用this.ChangeDetectorRef.detectChanges();解决了它 这会更新我的相机数据并启动扫描仪。

标签： htmlangulartypescriptangular-material

解决方案

推荐阅读