如何在整個頁面上監聽按鍵事件？

Question

我正在尋找一種方法來綁定一個函數到我的整個頁面（當用戶按下一個鍵，我希望它在我的conponent.ts中觸發一個函數）

在Angular 1中很容易ng-keypress但它不適用於(keypress)="handleInput($event)"。

我在整個頁面上用div包裝器試過了，但它似乎不起作用。它只在關注它時才起作用。

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

謝謝！

Answer 1

我會用你的組件中@HostListener裝飾：

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

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

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

還有其他選項，如：

主機屬性內@Component裝飾

角度建議在使用@HostListener裝飾主人房產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

yurzui的答案沒有工作對我來說，這可能是一個不同的RC版，或者它可能是我的錯誤。無論哪種方式，以下是我如何在Angular2 RC4中使用我的組件。

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