Angular2是否具有$ document的等价物

Question

我已经开始研究Angular2并且有一个基本的3个嵌套组件工作.但是我无法弄清楚如何将keypress处理程序添加到文档中.

如果没有,我将如何监听文件上的按键并对其作出反应？为了清楚起见,我需要回复文档本身的问题,而不是输入.

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

顺便说一下,Angular团队对键盘事件有一些有趣的想法,不知道目前的状态是什么.甚至可能它正在工作,没试过自己:)