web-dev-qa-db-ja.com

ページ全体でkeypressイベントをリッスンする方法を教えてください。

私は私のページ全体に機能をバインドする方法を探しています（ユーザーがキーを押したとき、私はそれが私のcomponent.tsの機能を引き起こすことを望みます）

AngularJSではng-keypressを使えば簡単でしたが、(keypress)="handleInput($event)"ではうまくいきません。

ページ全体でdivラッパーを使って試しましたが、うまくいかないようです。それが焦点になっているときだけそれは働きます。

<div (keypress)="handleInput($event)" tabindex="1">
typescriptangularkeypresskey-bindings
79
L.querter

コンポーネント内で @ HostListener デコレータを使用します。

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

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

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

のような他のオプションもあります：

@Componentデコレータ内のホストプロパティ

Angularは、Hostプロパティに対して@HostListenerデコレータを使用することをお勧めします https://angular.io/guide/styleguide#style-06-

@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();
  }
}
146
yurzui

yurzuiの答えは私にはうまくいきませんでした、それは異なるRCバージョンかもしれません、あるいはそれは私の側に間違いかもしれません。どちらにしても、Angular 2 RC 4（これはかなり古くなっています）のコンポーネントを使用してこれを実行しました。

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

2019年にこれに追加するためにAngular 8、

キーを押す代わりに、キーダウンを使用する必要がありました

@HostListener('document:keypress', ['$event'])

に

@HostListener('document:keydown', ['$event'])

作業中 Stacklitz

3
tshoemake

特定のキーボードボタンが押されたときにイベントを実行したい場合は、@ HostListenerを使用できます。これには、コンポーネントのtsファイルにHostListenerをインポートする必要があります。

'@ angular/core'から{HostListener}をインポート;
次に、以下の関数をあなたのコンポーネントのtsファイルのどこかに使います。

@HostListener('document:keyup', ['$event'])
  handleDeleteKeyboardEvent(event: KeyboardEvent) {
    if(event.key === 'Delete')
    {
      // remove something...
    }
  }
2
Prabhat Maurya