使用Angular2扫描条形码

我想在asp.net 5/Angular2中开发一个应用程序，我在扫描条形码时遇到了问题。使用Angular2扫描条形码

我使用我的组件打字稿：

@Component({ 
    selector: 'barcode-scanner', 
    templateUrl: 'app/scan.html', 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class ScanComponent implements OnInit { 
    barcode: string; 

    constructor() {} 
    ngOnInit() { } 

    onKey(event: any) { 
     this.barcode = event.target.value; 
    } 
}

和我的HTML模板（scan.html）：

<barcode-scanner> 
    <div class="container"> 
     <header><h1>My App title</h1></header> 
     <div class="row"> 
      <input type="text" (keyup)="onKey($event)" autofocus /> 
      <p>barcode: {{ barcode }}</p> 
     </div> 
    </div> 
</barcode-scanner>

它的工作，但只有在显示屏幕上的输入，并聚焦。有没有办法做到隐藏输入？（我试过input type="hidden"，并且也是一个input type="text"与display:none风格的属性，但在这两种情况下，它也没有作品。

此外，是否有可能捉对文档keypress事件？而不是在指定的输入？

来源

2016-02-09 AdrienTorris

您可以通过将活动对象为前缀target:event收听全球的事件。target可以window，document或body

(window:keypress)="doSomething($event)"

来源

2016-02-09 14:51:49

我试试现在。 – AdrienTorris

好，但如果连t target是'window'，'document'还是'body'，我怎样才能抓住扫描的条形码？ – AdrienTorris

我不知道扫描条形码时究竟发生了什么，或者遇到了什么问题。我假设你只是得到一系列键盘事件。只需将它们结合到一个字符串。条形码扫描过程何时开始以及何时结束，是否有一些指示？ –

使用Angular2扫描条形码

回答

相关问题