Как загрузить данные камеры перед запуском Angular MatBottomSheet

Question

Я хотел бы встроить сканер qr-кода (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'
}); }

Кто-нибудь уже сталкивался с этой проблемой?

UPDATE: Я решил это, вызвав this.ChangeDetectorRef.detectChanges (); Это обновляет данные моей камеры и запускает сканер.