总结：Angular接收扫描枪扫描数据

最新推荐文章于 2024-09-30 14:28:41 发布

晓晓涛

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量1.2k

点赞数

分类专栏： Angular 文章标签： angular 扫描枪 angularjs javascript typescript

本文链接：https://blog.csdn.net/Anicca36/article/details/103448502

版权

本文介绍了在Angular项目中如何处理扫描枪输入的条形码数据，包括扫描枪的工作原理、Angular中监听和移除事件的方法，以及遇到的扫描数据丢失问题。作者提醒在开发时要查阅官方文档，谨慎使用网上代码，并寻求解决方案。

摘要由CSDN通过智能技术生成

需求背景：
公司项目是化学试剂管理相关，需要在试剂页面根据扫描枪扫描到的条形码（试剂ID）打开相应试剂的详情页。
扫描枪原理：
刚开始接触扫描枪，就去网上查了下，查到的是扫描枪实质就是一个输入设备，每次输入完默认以回车键结尾。相当于键盘输入，和手工输入不同的是，它每两个字符产生的间隔只有几毫秒到几十毫秒（一般为20ms内，我看网上好多代码设置的都是30ms，我测试后用的是是50ms，原因后面我再说。），这也是代码接收扫描枪数据的大概原理。
代码片段：

接收扫描枪的逻辑代码是从CSDN上面找的，顺便在此感谢！由于我们项目用的是Angular框架，我就把它改为Angular风格了

// 导入事件
import {
    EventManager } from '@angular/platform-browser';

// 声明销毁监听事件的变量
export class TestComponent implements OnInit, OnDestroy {
   
  destroyListener:any;
}

// 注册事件
constructor(
    private eventManager:EventManager
）{
   }

// ngOnInit中添加键盘监听事件
ngOnInit() {
   
	let barcode = "";
    let lastTime = null, nextTime;
    let lastCode = null, nextCode;
    this.destroyListener = this.eventManager