Comment puis-je écouter un événement de frappe sur toute la page?

Je cherche un moyen de lier une fonction à toute ma page (quand un utilisateur appuie sur une touche, je veux qu’il déclenche une fonction dans mes

C’était facile dans Angular 1 avec un ng-keypress mais ça ne fonctionnait pas avec (keypress)="handleInput($event)" .

Je l’ai essayé avec un wrapper div sur toute la page mais cela ne semble pas fonctionner. cela ne fonctionne que lorsque l’accent est mis sur elle.

 

Je vous remercie!

J’utiliserais le décorateur @HostListener dans votre composant:

 import { HostListener } from '@angular/core'; @Component({ ... }) export class AppComponent { @HostListener('document:keypress', ['$event']) handleKeyboardEvent(event: KeyboardEvent) { this.key = event.key; } } 

Il y a aussi d’autres options comme:

propriété hôte dans @Component décorateur

Angular recommande d’utiliser @HostListener décorateur sur la propriété hôte https://angular.io/guide/styleguide#style-06-03

 @Component({ ... host: { '(document:keypress)': 'handleKeyboardEvent($event)' } }) export class AppComponent { handleKeyboardEvent(event: KeyboardEvent) { console.log(event); } } 

renderer.listen

 import { Component, Renderer2 } from '@angular/core'; @Component({ ... }) export class AppComponent { globalListenFunc: Function; constructor(private renderer: Renderer2) {} ngOnInit() { this.globalListenFunc = this.renderer.listen('document', 'keypress', e => { console.log(e); }); } ngOnDestroy() { // remove listener this.globalListenFunc(); } } 

Observable.fromEvent

 import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/fromEvent'; import { Subscription } from 'rxjs/Subscription'; @Component({ ... }) export class AppComponent { subscription: Subscription; ngOnInit() { this.subscription = Observable.fromEvent(document, 'keypress').subscribe(e => { console.log(e); }) } ngOnDestroy() { this.subscription.unsubscribe(); } } 

La réponse de yurzui n’a pas fonctionné pour moi, il pourrait s’agir d’une version RC différente, ou cela pourrait être une erreur de ma part. De toute façon, voici comment je l’ai fait avec mon composant dans Angular2 RC4.

 @Component({ ... host: { '(document:keydown)': 'handleKeyboardEvents($event)' } }) export class MyComponent { ... handleKeyboardEvents(event: KeyboardEvent) { this.key = event.which || event.keyCode; } } 

Si vous souhaitez effectuer un événement sur un bouton du clavier spécifique, vous pouvez dans ce cas utiliser @HostListener. Pour cela, vous devez importer HostListener dans votre fichier de composant ts.

import {HostListener} depuis ‘@ angular / core’;
puis utilisez la fonction ci-dessous n’importe où dans votre fichier de composant ts.

 @HostListener('document:keyup', ['$event']) handleDeleteKeyboardEvent(event: KeyboardEvent) { if(event.key === 'Delete') { // remove something... } }