如何在整个页面上监听按键事件？

我正在寻找一种方法来绑定一个函数到我的整个页面（当用户按下一个键，我希望它在我的conponent.ts中触发一个函数）如何在整个页面上监听按键事件？

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

我在整个页面上用div包装器试过了，但它似乎不起作用。它只在关注它时才起作用。

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

谢谢！

来源

2016-05-21 L.querter

我会用你的组件中@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(); 
    } 
}

来源

2016-05-21 12:59:27 yurzui

工件没问题。必须添加来自'@ angular/core'的import {HostListener}。并且即使在组件的任何地方也能打电即使外面构造也工作正常 – gnganpath

感谢这一点，但只是面向未来的读者：如果你需要箭头键，使用keydown而不是按键。 –

如果您需要'esc'键，请使用'keyup'事件。谢谢@TroelsLarsen –

yurzui的答案没有工作对我来说，这可能是一个不同的RC版，或者它可能是我的错误。无论哪种方式，以下是我如何在Angular2 RC4中使用我的组件。

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

来源

2016-09-09 19:38:48 Adam

这是相同的，只是替代语法，你用'keydown'而不是'keypress' –

就像我说的，可能是我的错误，但这就是它为我工作所需要的。 :) – Adam

这对使用document.addEventListener会有什么好处？这只是一个抽象DOM的问题吗？ – Ixonal

如何在整个页面上监听按键事件？

回答

相关问题