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 !!!
Vous devez vous connecter pour publier un commentaire.
@HostBindings('attr.foo') foo = 'bar'
est de lier les valeurs à partir de votre instance de composant de l'élément hôte commeclass
, des attributs, des propriétés ou des styles.host: {}
est découragé et@HostBinding()
,@HostListener()
sont préférés, mais je n'ai pas vu cette mentionnée à partir de l'Angulaire de l'équipe.if (event.keyCode == 27) { ... }
pour vérifier si l'événement est la touche esc.host
commeHostListener
a fonctionné mieux pour l'événement clé de combinaisons pour moi.@HostListener
fonctionne très bien, il fait aussi (ma) Angulaire de la détection de changement run pour le composant parent sur chaque pression de touche. À l'aide deObservable.fromEvent(window, 'keydown').subscribe(...)
ne le fait pas. Je pense qu'on pourrait créer un décorateur pour exécuter le décoré de la méthode à l'extérieur du Angulaire de la zone, mais je n'ai pas essayé.