Come posso ascoltare l'evento keypress su tutta la pagina?

Question

Sto cercando un modo per legare una funzione per tutta la mia pagina (quando un utente preme un tasto, lo voglio per attivare una funzione nei miei conponent.ts)

E 'stato facile in angolare 1 con un ng-keypress ma non funziona con (keypress)="handleInput($event)".

L'ho provato con un wrapper div su tutta la pagina ma non sembra funzionare. funziona solo quando lo stato attivo è su di esso.

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

Grazie!

Answer 1

vorrei utilizzare @HostListener decoratore in un componente:

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

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

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

Ci sono anche altre opzioni come:

proprietà ospite entro @Component decoratore

angolare raccomandano utilizzando @HostListener decoratore su host property 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

risposta di yurzui non ha funzionato per me, potrebbe essere una versione RC diversa, oppure potrebbe essere un errore da parte mia. Ad ogni modo, ecco come l'ho fatto con il mio componente in Angular2 RC4.

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