javascript - 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;
})
}
解决方案
推荐阅读
- python - 有没有办法用 Python Numba jitclass 抑制除以零错误?
- python - 如果在循环文件列表时文件名与 python 中的特定“%y%m%d”格式不匹配,如何继续下一次迭代?
- java - Firebase 数据不会加载到我的 RecyclerView 中
- r - 按纬度或经度将地图拆分为两个单独的地图
- flutter - pushAndRemoveUntil后android的后退按钮不工作
- node.js - 当我在 MERN 中提交数据时出现错误 400(错误请求)
- node.js - 来自节点的 Onclick 函数 pug
- java - 自定义声明样式不显示文本属性
- swift - 如何在 SwiftUI 中使用径向渐变填充路径
- android - 当数据绑定android中的数据发生变化时如何更新UI?