web-dev-qa-db-fra.com

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

Je cherche un moyen de lier une fonction à la totalité de la page (lorsqu'un utilisateur appuie sur une touche, je veux qu'elle déclenche une fonction dans mon composant.ts)

C'était facile dans AngularJS avec un ng-keypress mais cela ne fonctionne 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">
typescriptangularkeypresskey-bindings
85
L.querter

Je voudrais utiliser @ HostListener décorateur 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 dans @Component decorator

Angular recommande d'utiliser @HostListener decorator sur la propriété Host https://angular.io/guide/styleguide#style-06-

@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();
  }
}
159
yurzui

la réponse de yurzui n'a pas fonctionné pour moi, il pourrait s'agir d'une version différente de la télécommande ou d'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;
    }
}
16
Adam

Pour ajouter à cela en 2019 w Angular 8,

au lieu d'appuyer sur je devais utiliser keydown

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

à

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

Travailler Stacklitz

3
tshoemake

Si vous souhaitez exécuter un événement sur n'importe quelle touche du clavier, vous pouvez utiliser @HostListener. Pour cela, vous devez importer HostListener dans votre fichier ts de composant.

import {HostListener} from '@ 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...
    }
  }
2
Prabhat Maurya