Làm thế nào tôi có thể nghe sự kiện nhấn phím trên toàn bộ trang?

Tôi đang tìm cách liên kết một hàm với toàn bộ trang của mình (khi người dùng nhấn một phím, tôi muốn nó kích hoạt một hàm trong component của mình.

Nó rất dễ dàng trong AngularJS với một ng-keypressnhưng nó không hoạt động với (keypress)="handleInput($event)".

Tôi đã thử nó với một trình bao bọc div trên toàn bộ trang nhưng nó dường như không hoạt động. nó chỉ hoạt động khi tập trung vào nó.

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

Tôi sẽ sử dụng trình trang trí @HostListener trong thành phần của bạn:

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

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

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

Ngoài ra còn có các tùy chọn khác như:

lưu trữ tài sản trong @Componentdecorator

Angular khuyên bạn nên sử dụng @HostListenerdecorator trên thuộc tính máy chủ 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();
  }
}

Câu trả lời của yurzui không phù hợp với tôi, nó có thể là một phiên bản RC khác, hoặc có thể do lỗi của tôi. Dù bằng cách nào, đây là cách tôi đã làm điều đó với thành phần của tôi trong Angular2 RC4 (hiện đã khá lỗi thời).

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

Chỉ để thêm vào điều này vào năm 2019 với Angular 8,

thay vì nhấn phím tôi phải sử dụng phím xuống

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

đến

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

Làm việc Stacklitz

Nếu bạn muốn thực hiện bất kỳ sự kiện nào trên bất kỳ lần nhấn nút bàn phím cụ thể nào, trong trường hợp đó, bạn có thể sử dụng @HostListener. Đối với điều này, bạn phải nhập HostListener trong tệp ts thành phần của mình.

nhập {HostListener} từ '@ angle / core';
sau đó sử dụng hàm dưới đây ở bất kỳ đâu trong tệp ts thành phần của bạn.

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

Xin lưu ý rằng "document: keypress" không được dùng nữa. Thay vào đó chúng ta nên sử dụng document: keydown.

Liên kết: https://developer.mozilla.org/fr/docs/Web/API/Document/keypress_event

Tôi nghĩ điều này làm công việc tốt nhất

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

ví dụ trong app.component

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