angular 中的扫描仪检测 2+

Question

我有一个输入框，用户可以扫描（手持扫描仪）或手动输入（键盘）UPC。如果用户扫描 UPC，我想自动调用搜索功能，但如果手动输入，用户将不得不点击搜索按钮。我已经能够找到 angularJS 和 jquery 的解决方案，但没有找到 angular 2+ 的解决方案。有没有类似 jquery 扫描仪检测的解决方案？或者有谁知道在 angular 2+ 中实现解决方案的方法，也许是计时器功能。

谢谢。

Answer 1

使用 Angular 输入从您可以键入的抽象控制指令继承属性。 https://angular.io/api/forms/AbstractControlDirective

我会简单地访问 onChange 函数，检查表单是否已 touched、isDirty 等，以查看哪个未通过编程更改输入而更改，可能 touched.如果您认为 touched 为假，并且值 onChange 与初始值不同，您可以提交搜索。只有当表单的值在您没有手动输入数据的情况下发生变化时才会触发，这将使 touched 为真。

如果有帮助请告诉我！

Answer 2

您可以改用 @HostListener 来收听条形码输入。我制定了一个指令，将其应用于我希望扫描仪在其上工作的页面

import { Directive, HostListener } from '@angular/core';

@Directive({selector: '[appScanner]'})

export class ScannerDirective {
  combinedCode = null

  @HostListener('document:keypress', ['$event'])
  keyEvent(event: KeyboardEvent) {
    if (event.key === 'Enter') {
      console.log(this.combinedCode);
    } else {
      if (this.combinedCode === null) {
        this.combinedCode = event.key;
      } else {
        this.combinedCode = this.combinedCode + event.key;
      }
    }
  } 
}

然后您可以只为输入的内容设置一个常规表单域

angular 中的扫描仪检测 2+

Scanner detection in angular 2+

jquery

barcode-scanner

angular