在Angular应用程序中使用USB条码扫描器

Question

我有一个使用Angular 10的应用程序，我想要实现USB条码扫描器输入（例如在键盘模式下）。问题是我正在使用ngx-barcodeput包，我需要一个输入字段，在条形码扫描时应该处于活动状态。如何在没有输入字段的情况下使用类似ngx-barcodeput的东西？我希望我的扫描仪始终在页面上处于活动状态，而不仅仅是当我单击输入字段时。您有任何提示吗？我搜索了网络，但找不到其他可以用于Angular应用程序中的USB条形码扫描器的包。

- Jakub

Answer 1

这段代码可以在Angular应用程序中扫描USB条形码扫描器，

HTML文件：

    <div class="container">
        <header><h1>My App title</h1></header>
        <div class="row">
            <input type="text" (window:keypress)="onKey($event)"  autofocus />
            <p>barcode: {{ barcode }}</p> 
        </div>
    </div>

应用程序组件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'barcode-scanner',
  templateUrl: './scan-barcode.component.html',
  styleUrls: ['./scan-barcode.component.css'],

})
export class ScanBarcodeComponent implements OnInit {
  barcode: string='';
  values: string[] =[];
  constructor() { }

  ngOnInit(): void {
  }
  onKey(event: any) {
    this.barcode=event.target.value;
}

}

在此处查看完整代码：https://github.com/saurabhku/ex-angular-barcode-scan

- Saurabh Kumar