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

Question

我想将二维码扫描器（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（）; 解决了该问题 这将更新我的相机数据并启动扫描仪。