Как я могу прослушать событие нажатия клавиши на всей странице?

Я ищу способ привязать функцию ко всей моей странице (когда пользователь нажимает клавишу, я хочу, чтобы она запускала функцию в моем компоненте.ts)

Это было легко в угловой 1 с ng-keypress но это не работает с (keypress)="handleInput($event)".

я попробовал его с div оберткой на всей странице, но это, кажется, не работает. он работает только тогда, когда внимание сосредоточено на нем.

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

спасибо!

3 54
angularjs typescript keypress key-bindings

3 ответа:

Я хотел бы использовать @HostListener декоратор в вашем компоненте:

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

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

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

есть и другие варианты, такие как:

хоста собственность внутри @Component оформителя

Угловое рекомендуем использовать @HostListener декоратор над хозяином недвижимости https://angular.io/guide/styleguide#style-06-03

@Component({
  ...
  host: {
    '(document:keypress)': 'handleKeyboardEvent($event)'
  }
})
export class AppComponent {
  handleKeyboardEvent(event: KeyboardEvent) {
    console.log(event);
  }
}

рендерер.слушай

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

наблюдаема.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();
  }
}
101

ответ юрзуи не сработал для меня, это может быть другая версия RC, или это может быть ошибка с моей стороны. В любом случае, вот как я сделал это с моим компонентом в Angular2 RC4.

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

Если вы хотите выполнить какое-либо событие на любой конкретной кнопке клавиатуры, в этом случае вы можете использовать @HostListener. Для этого необходимо импортировать HostListener в файл ts компонента.

импорт { HostListener } из '@angular / core';
затем используйте функцию ниже в любом месте вашего файла component ts.

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