У Angular2 есть эквивалент $ document

Question

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

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

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

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

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

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

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

Answer 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, Угловая команды имела некоторые интересные ideas about keyboard events, не уверен, что статус этого в данный момент. Возможно даже it's working, не пробовал себя :)