Попытка контролировать события клавиатуры с помощью Angular 2 с помощью TypeScript и Что такое Angular2 способ создания глобальных сочетаний клавиш (aka hotkeys)? был полезен но tslint (codelyzer) объекты с сообщением
В декораторе класса @Component вы используете "хост", Это считается плохой практикой. Используйте "@HostBindings", Вместо этого используется декоратор свойств @HostListeners.
Как использовать рекомендуемые декораторы? Я не уверен, как примеры из Angular 2: привязка хоста и прослушивание хоста относятся к моему прецеденту, поскольку я не привязываюсь ни к каким элементам DOM.
Вот моя демонстрация
@Component({
selector: 'my-app',
template: `
<div>
<h2>Keyboard Event demo</h2>
Start typing to see KeyboardEvent values
</div>
<hr />
KeyboardEvent
<ul>
<li>altKey: {{altKey}}</li>
<li>charCode: {{charCode}}</li>
<li>code: {{code}}</li>
<li>ctrlKey: {{ctrlKey}}</li>
<li>keyCode: {{keyCode}}</li>
<li>keyIdentifier: {{keyIdentifier}}</li>
<li>metaKey: {{metaKey}}</li>
<li>shiftKey: {{shiftKey}}</li>
<li>timeStamp: {{timeStamp}}</li>
<li>type: {{type}}</li>
<li>which: {{which}}</li>
</ul>
`,
host: { '(window:keydown)': 'keyboardInput($event)' }
/*
In the "@Component" class decorator you are using the "host" property, this is considered bad practice.
Use "@HostBindings", "@HostListeners" property decorator instead.
*/
})
export class App {
/* a few examples */
keyboardEvent: any;
altKey: boolean;
charCode: number;
code: string;
ctrlKey: boolean;
keyCode: number;
keyIdentifier: string;
metaKey: boolean;
shiftKey: boolean;
timeStamp: number;
type: string;
which: number;
keyboardInput(event: any) {
event.preventDefault();
event.stopPropagation();
this.keyboardEvent = event;
this.altKey = event.altKey;
this.charCode = event.charCode;
this.code = event.code;
this.ctrlKey = event.ctrlKey;
this.keyCode = event.keyCode;
this.keyIdentifier = event.keyIdentifier;
this.metaKey = event.metaKey;
this.shiftKey = event.shiftKey;
this.timeStamp = event.timeStamp;
this.type = event.type;
this.which = event.which;
}
}
https://plnkr.co/edit/Aubybjbkp7p8FPxqM0zx
import {HostListener} from '@angular/core';
@HostListener('window:keydown', ['$event'])
keyboardInput(event: KeyboardEvent) {
@HostBindings('attr.foo') foo = 'bar' - привязать значения из вашего экземпляра компонента к элементу узла, например class, атрибутам, свойствам или стилям.