首页 > 解决方案 > Qr Scanner - Angular.Child 组件 -qr.component 包含在父组件中的输入(ngx-barcode-scanner),关闭相机事件不起作用

问题描述

Qr 扫描仪 - 角度。作为子 sherable 组件,其输入包含在父组件中

我制作了子组件 qr.component.ts 并包含在 parent.component.ts

我想让它成为可共享的 component-> qr-scanner ,并带有输入输出。

问题是当我从父级单击取消时,它不会关闭 qr-camera:你能看到代码并建议这对你是否有意义吗?

qr.component.html:

<div *ngIf="showQr">
  <div class="scan-page" [class.show-scanner]="isOn">    
  </div
</div>

qr.component.ts:

export class QrScanComponent implements OnInit, OnChanges {
      @Input('showQr') showQr;
      @Input('isOn') isOn;
      @Output() content = new EventEmitter();    

    async sendContent() {
        this.content.emit(this.scannedBags)   
      }  
}

父组件.html

<app-qr-scan [showQr]="showQr"></app-qr-scan> 
<button (click)="cancelScanning()"> cancel qr </button>

父组件.ts

 async startScanning() {
    this.showQr = true; 
     this.isOn = true;
  }  


async cancelScanning() {        
    this.isOn = false;
    this.showQr = false;    

    this.qrScanner.pausePreview();  

    this.qrScanner.hide().then(() => {  
      console.log('scanner should be hidden');  
    }); 
    this.qrScanner.destroy().then( () => {  
      console.log('its bein destoryed');    
      this.isOn = false;    
    })  
  }   

标签: javascriptangulartypescriptqr-codebarcode-scanner

解决方案


推荐阅读