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

Je cherche un moyen de lier une fonction à toute ma page (lorsqu'un utilisateur appuie sur une touche, je veux qu'il déclenche une fonction dans mon component.ts)

C'était facile dans AngularJS avec un ng-keypressmais ça ne marche 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 dessus.

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

J'utiliser @HostListener décorateur au sein de votre composant:

import { HostListener } from '@angular/core';

@Component({
  ...
})
export class AppComponent {

  @HostListener('document:keypress', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) { 
    this.key = event.key;
  }
}

Il existe également d'autres options comme:

propriété hôte au sein du @Componentdécorateur

Angular recommande d'utiliser le @HostListenerdé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, cela pourrait être une version RC différente, ou cela pourrait être une erreur de ma part. Quoi qu'il en soit, voici comment je l'ai fait 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;
    }
}

Juste pour ajouter à cela en 2019 w Angular 8,

au lieu d'appuyer sur une touche, j'ai dû utiliser la touche enfoncée

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

à

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

Travailler Stacklitz

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

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

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

Sachez que "document: keypress" est obsolète. Nous devrions plutôt utiliser document: keydown.

Lien: https://developer.mozilla.org/fr/docs/Web/API/Document/keypress_event

Je pense que cela fait le meilleur travail

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

par exemple dans app.component

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