Tüm sayfadaki tuşa basma olayını nasıl dinleyebilirim?

Bir işlevi tüm sayfama bağlamanın bir yolunu arıyorum (bir kullanıcı bir tuşa bastığında, bileşenimdeki bir işlevi tetiklemesini istiyorum)

AngularJS'de a ile kolaydı ng-keypressama ile çalışmıyor (keypress)="handleInput($event)".

Tüm sayfada bir div sarmalayıcıyla denedim ama işe yaramıyor gibi görünüyor. sadece odak noktası üzerindeyken çalışır.

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

Bileşeninizde @HostListener dekoratörünü kullanırdım :

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

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

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

Aşağıdakiler gibi başka seçenekler de vardır:

@Componentdekoratör içinde barındırma özelliği

Angular @HostListener, ana mülkün yerine dekoratör kullanılmasını önerir 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'nin cevabı benim için işe yaramadı, farklı bir RC versiyonu olabilir veya benim açımdan bir hata olabilir. Her iki durumda da, Angular2 RC4'teki bileşenimle bunu şu şekilde yaptım (şimdi oldukça modası geçmiş).

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

Sadece buna eklemek için 2019 w Angular 8,

tuşa basmak yerine tuşa basmayı kullanmak zorunda kaldım

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

-e

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

Stacklitz Çalışma

Herhangi bir klavye düğmesine basıldığında herhangi bir olay gerçekleştirmek istiyorsanız, bu durumda @HostListener kullanabilirsiniz. Bunun için, bileşen ts dosyanıza HostListener'ı içe aktarmanız gerekir.

{HostListener} öğesini '@ angular / core'dan içe aktarın;
daha sonra bileşen ts dosyanızın herhangi bir yerinde aşağıdaki işlevi kullanın.

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

"Document: keypress" in kullanımdan kaldırıldığını unutmayın. Bunun yerine document: keydown kullanmalıyız.

Bağlantı: https://developer.mozilla.org/fr/docs/Web/API/Document/keypress_event

Bunun en iyi işi yaptığını düşünüyorum

https://angular.io/api/platform-browser/EventManager

örneğin app.component içinde

constructor(private eventManager: EventManager) {
    const removeGlobalEventListener = this.eventManager.addGlobalEventListener(
      'document',
      'keypress',
      (ev) => {
        console.log('ev', ev);
      }
    );
  }