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

Question

我在 Angular 10 中有一个应用程序，我想实现 USB 条码扫描器输入（例如在键盘模式)。问题是我正在使用包 ngx-barcodeput，我需要一个输入字段，当扫描条形码时，该字段 应该处于活动状态。如何在没有输入字段 的情况下使用 ngx-barcodeput 之类的东西？我想让我的 扫描仪在页面上一直处于活动状态 ，而不仅仅是在我单击输入字段时。有什么建议吗？我在网上搜索，但找不到任何其他可用于 angular 应用程序中的 usb 条形码扫描仪的软件包。

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

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

Using USB barcode scanner in angular application

barcode

typescript

angular