2016-05-21 28 views
36

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)Come posso ascoltare l'evento keypress su tutta la pagina?

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!

risposta

74

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(); 
    } 
} 
+1

Werking fine. import {HostListener} da '@ angular/core' deve aggiungere. e chiama anche ovunque nel componente. Perfetto anche per i controtenori laterali – gnganpath

+6

Grazie per questo, ma solo per i futuri lettori: se hai bisogno dei tasti freccia, usa keydown anziché keypress. –

+2

Se è necessaria la chiave 'esc', utilizzare l'evento' keyup'. Grazie a @TroelsLarsen –

13

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; 
    } 
} 
+3

È lo stesso, solo sintassi alternativa e hai usato 'keydown' invece di' keypress' –

+0

Come ho detto, probabilmente un errore da parte mia, ma è quello che ci è voluto per farlo funzionare. :) – Adam

+0

Quale sarebbe il vantaggio di questo vs usando document.addEventListener? È solo questione di astrarre il DOM? – Ixonal

Problemi correlati