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

【问题标题】：Using USB barcode scanner in angular application在 Angular 应用程序中使用 USB 条码扫描器
【发布时间】：2020-12-19 13:43:19
【问题描述】：

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

【问题讨论】：

标签： angular typescript barcode

【解决方案1】：

此代码在角度应用程序中从 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

【讨论】：