Имеет ли Angular2 эквивалент $document

Я начал изучать Angular2 и имел базовый доступ к 3-мя вложенным компонентам. Однако я не могу понять, как добавить обработчик нажатия клавиши в документ.

Если нет, как бы я прослушивал нажатие на документ и реагировал на него? Чтобы быть ясным, мне нужно ответить на кепресс на самом документе, а не на ввод.

В Angular 1 я бы создал директиву и использовал $document; что-то вроде этого:

 $document.on("keydown", function(event) {

      // if keycode...
      event.stopPropagation();
      event.preventDefault();

      scope.$apply(function() {            
        // update scope...          
      });

Но мне еще не найти решение Angular2.

Ответы

Ответ 1

Вы можете сделать что-то вроде этого:

@Component({
  host: {
    '(document:keyup)': '_keyup($event)',
    '(document:keydown)': '_keydown($event)',
  },
})
export class Component {
  private _keydown(event: KeyboardEvent) {
    let prevent = [13, 27, 37, 38, 39, 40]
      .find(no => no === event.keyCode);
    if (prevent) event.preventDefault();
  }
  private _keyup(event: KeyboardEvent) {
    if (event.keyCode === 27) this.close();
    else if (event.keyCode === 13) ...;
    else if (event.keyCode === 37) ...;
    else if (event.keyCode === 38) ...;
    else if (event.keyCode === 39) ...;
    else if (event.keyCode === 40) ...;

    // else console.log(event.keyCode);
  }
}

Команда BTW, Angular имела несколько интересных идей о событиях с клавиатурой, не знаю, каков статус этого на данный момент. Это даже возможно он работает, не пробовал себя:)