Angulaire 2 Événements De Clavier

Essayer de surveiller les événements de clavier Angulaire 2 à l'aide de la Machine et Qu'est-ce que Angular2 façon de créer des raccourcis clavier globaux (un.k.un. touches de raccourci)? a été utile, mais tslint (codelyzer) des objets avec le message

Dans le "@Composante" classe décorateur vous utilisez le "host"
la propriété, c'est considéré comme une mauvaise pratique. Utilisez "@HostBindings",
"@HostListeners" propriété décorateur à la place.

Comment puis-je utiliser le recommandé décorateurs? Je ne suis pas sûr de savoir comment les exemples dans Angulaire 2: liaison d'Hôte de l'Hôte et à l'écoute s'appliquer à mon cas d'utilisation comme je ne suis pas la liaison à un des éléments du DOM.

Ici est mon démo

@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

  • Pour info -- le plunker référencé ci-dessus ne fonctionne pas pour moi dans IE 11, mais il fonctionne très bien sur Chrome. Il se bloque sur le Chargement...
  • hôte: { '(fenêtre:keydown)': 'keyboardInput($event)' } et keyboardInput(cas: tout) {} est la réponse, merci !!!
InformationsquelleAutor james sloan | 2016-04-18