typescript - Utilizarea unui scanner de coduri de bare USB într-o aplicație Angular


Am o aplicație în Angular 10 și aș dori să implementez input de scanner de coduri de bare USB (de exemplu în mod tastatură). Problema este că folosesc pachetul ngx-barcodeput unde am nevoie de un câmp de input care ar trebui să fie activ atunci când se scanează codurile de bare. Cum pot folosi ceva de genul ngx-barcodeput fără câmp de input? Aș dori ca scannerul meu să fie activ tot timpul pe pagină, nu doar când dau click pe câmpul de input. Aveți vreun sfat? Am căutat pe internet și nu pot găsi alt pachet care poate fi folosit pentru scannere de coduri de bare USB în aplicații Angular.

Răspuns #1

Acest cod scanează coduri de bare de la un scanner USB de coduri de bare într-o aplicație Angular,

Fișier 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>

componentă de aplicație:

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;
}

}

Vezi codul complet aici: https://github.com/saurabhku/ex-angular-barcode-scan