使用Angular2扫描条形码

Question

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

我的组件使用typeScript：

@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"和带有display:none样式属性的input type="text"，但在这两种情况下都不起作用。

另外，是否可以捕获文档上的keypress事件？而不是在指定的输入上？

Answer 1

您可以通过将事件目标添加为前缀target:event来侦听全局事件。target可以是window、document或body

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