ฉันจะฟังเหตุการณ์การกดแป้นทั้งหน้าได้อย่างไร?

ฉันกำลังมองหาวิธีผูกฟังก์ชันเข้ากับทั้งหน้าของฉัน (เมื่อผู้ใช้กดปุ่มฉันต้องการให้เรียกใช้ฟังก์ชันใน component.ts ของฉัน)

มันง่ายมากใน 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 ฟัง

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

แทนที่จะกดแป้นฉันต้องใช้คีย์ดาวน์

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

ถึง

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

Stacklitzทำงาน

หากคุณต้องการทำเหตุการณ์ใด ๆ บนการกดปุ่มแป้นพิมพ์ใด ๆ ในกรณีนั้นคุณสามารถใช้ @HostListener สำหรับสิ่งนี้คุณต้องนำเข้า HostListener ในไฟล์ ts คอมโพเนนต์ของคุณ

นำเข้า {HostListener} จาก "@ angular / core";
จากนั้นใช้ฟังก์ชันด้านล่างที่ใดก็ได้ในไฟล์ ts คอมโพเนนต์ของคุณ

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

ฉันคิดว่านี่ทำได้ดีที่สุด

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

โปรดทราบว่า "document: keypress" เลิกใช้งานแล้ว เราควรใช้ document: keydown แทน

ลิงค์: https://developer.mozilla.org/fr/docs/Web/API/Document/keypress_event