페이지 전체에서 키 누르기 이벤트를 청취하려면 어떻게 해야 하나요?

페이지 전체에서 키 누르기 이벤트를 청취하려면 어떻게 해야 하나요?

함수를 페이지 전체에 바인드하는 방법을 찾고 있습니다(사용자가 키를 누르면 컴포넌트 내에서 함수를 트리거하고 싶다.ts).

Angular에서는 쉬웠다.JS와 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();
  }
}

관찰 가능.from Event

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

2019년 Angular 8에 덧붙이자면

키를 누르는 대신 키다운을 사용해야 했다.

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

로.

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

현용 Stacklitz

yurzui의 답변은 나에게 맞지 않았고, 다른 RC 버전일 수도 있고, 내 실수일 수도 있습니다.어느 쪽이든 Angular2 RC4의 컴포넌트를 사용한 방법은 다음과 같습니다(지금은 상당히 구식입니다).

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

특정 키보드버튼으로 이벤트를 실행하는 경우 이 경우 @HostListener를 사용할 수 있습니다.이를 위해서는 컴포넌트 ts 파일에 HostListener를 Import해야 합니다.

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

그래서 조금 힘들었지만, tshoemake는 F키에도 맞는 정답을 제공했습니다.F 키가 검색과 같은 원래 브라우저 액션을 실행하는 것을 방지하려면 preventDefault() 메서드를 호출합니다.

@HostListener('document:keydown', ['$event'])
  handleDeleteKeyboardEvent(event: KeyboardEvent) {
    switch (event.key) {
      case "F2":
        this.myF2Action();
        event.preventDefault();
        break;
    }
}

언급URL : https://stackoverflow.com/questions/37362488/how-can-i-listen-for-keypress-event-on-the-whole-page