Comment puis-je écouter l'événement de pression sur le clavier sur toute la page ?

Question

Je cherche un moyen de lier une fonction à l'ensemble de ma page (lorsqu'un utilisateur appuie sur une touche, je veux que cela déclenche une fonction dans mon fichier component.ts).

C'était facile dans AngularJS avec une ng-keypress mais il ne fonctionne pas avec (keypress)="handleInput($event)" .

J'ai essayé avec un div wrapper sur toute la page mais ça ne semble pas fonctionner. Il ne fonctionne que lorsque le focus est sur lui.

<div (keypress)="handleInput($event)" tabindex="1">

Answer 1

J'utiliserais @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é de l'hôte sur @Component décorateur

Angular recommande d'utiliser @HostListener décorateur sur la propriété de l'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();
  }
}

Answer 2

La réponse de yurzui n'a pas fonctionné pour moi, il se peut que ce soit une version RC différente, ou une erreur de ma part. Quoi qu'il en soit, voici comment j'ai procédé avec mon composant dans Angular2 RC4 (qui est maintenant assez obsolète).

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

Answer 3

Juste pour ajouter à cela en 2019 w Angular 8,

au lieu de keypress, j'ai dû utiliser keydown

@HostListener('document:keypress', ['$event'])

à

@HostListener('document:keydown', ['$event'])

Travail Stacklitz

Answer 4

Si vous voulez exécuter un événement lors de la pression d'un bouton spécifique du clavier, dans ce cas, vous pouvez utiliser @HostListener. Pour cela, vous devez importer HostListener dans le fichier ts de votre composant.

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

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

Answer 5

Je pense que ceci fait le meilleur travail

https://angular.io/api/platform-browser/EventManager

pour l'exemple dans app.component

constructor(private eventManager: EventManager) {
    const removeGlobalEventListener = this.eventManager.addGlobalEventListener(
      'document',
      'keypress',
      (ev) => {
        console.log('ev', ev);
      }
    );
  }