回答:
コンポーネント内で@HostListenerデコレータを使用します。
import { HostListener } from '@angular/core';
@Component({
...
})
export class AppComponent {
@HostListener('document:keypress', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
this.key = event.key;
}
}
他にも次のようなオプションがあります。
@Component
デコレータ内のホストプロパティ
Angularは@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();
}
}
esc
キーが必要な場合は、keyup
イベントを使用してください。@TroelsLarsenに感謝
function-key
(F1、F2、F3、...)をどのように検出できますか?
ユルズイの答えは私にはうまくいきませんでした、それは別のRCバージョンかもしれません、またはそれは私の側の間違いかもしれません。いずれにせよ、Angular2 RC4のコンポーネントでこれを実行した方法は次のとおりです(現在はかなり古くなっています)。
@Component({
...
host: {
'(document:keydown)': 'handleKeyboardEvents($event)'
}
})
export class MyComponent {
...
handleKeyboardEvents(event: KeyboardEvent) {
this.key = event.which || event.keyCode;
}
}
keydown
代わりに使用しました。keypress
2019年にこれに追加するだけですw Angular 8
キーを押す代わりに、キーダウンを使用する必要がありました
@HostListener('document:keypress', ['$event'])
に
@HostListener('document:keydown', ['$event'])
ワーキングStacklitz
特定のキーボードボタンを押したときにイベントを実行する場合は、@ HostListenerを使用できます。そのためには、コンポーネントのtsファイルにHostListenerをインポートする必要があります。
'@ angular / core'から{HostListener}をインポートします。
次に、コンポーネントのtsファイルの任意の場所で以下の関数を使用します。
@HostListener('document:keyup', ['$event'])
handleDeleteKeyboardEvent(event: KeyboardEvent) {
if(event.key === 'Delete')
{
// remove something...
}
}
「document:keypress」は廃止されていることに注意してください。代わりにdocument:keydownを使用する必要があります。
リンク:https : //developer.mozilla.org/fr/docs/Web/API/Document/keypress_event
これは最高の仕事だと思います
https://angular.io/api/platform-browser/EventManager
たとえばapp.component
constructor(private eventManager: EventManager) {
const removeGlobalEventListener = this.eventManager.addGlobalEventListener(
'document',
'keypress',
(ev) => {
console.log('ev', ev);
}
);
}
window:keypress
か?