전체 페이지에서 키 누르기 이벤트를 수신하려면 어떻게해야합니까?

내 전체 페이지에 함수를 바인딩하는 방법을 찾고 있습니다 (사용자가 키를 누를 때 내 구성 요소에서 함수를 트리거하고 싶습니다).

AngularJS에서 a를 사용하는 것은 쉬웠 ng-keypress지만 (keypress)="handleInput($event)".

전체 페이지에서 div 래퍼로 시도했지만 작동하지 않는 것 같습니다. 초점이있을 때만 작동합니다.

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

구성 요소 내에서 @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();
  }
}

yurzui의 대답이 저에게 효과가 없었거나 다른 RC 버전이거나 내 실수 일 수 있습니다. 어느 쪽이든 Angular2 RC4의 구성 요소로 수행 한 방법은 다음과 같습니다.

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

2019 w Angular 8에 추가하기 위해

keypress 대신 keydown을 사용해야했습니다.

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