Сканирование штрих-кода с использованием 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"а также input type="text" с display:none атрибут стиля, но в обоих случаях это не работает.

Кроме того, можно ли поймать keypress событие в документе? а не на указанном входе?

Answer 1

Вы можете прослушивать глобальные события, добавив цель в качестве префикса target:event, target может быть window, document или же body

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