Angular2 是否有相当于 $document 的东西

2024-03-11

我已经开始研究 Angular2,并拥有 3 个嵌套组件的基本功能。但是我无法弄清楚如何将按键处理程序添加到文档中。

如果没有,我将如何监听文档上的按键并做出反应? 需要明确的是,我需要响应文档本身的 kepyress,而不是输入。

在 Angular 1 中,我将创建一个指令并使用 $document;像这样的东西:

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

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

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

但我还没有找到 Angular2 的解决方案。


你可以这样做:

@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 团队有一些有趣的事情关于键盘事件的想法 https://github.com/angular/angular/blob/909031e6887175b380492119df3b694d164c66eb/modules/angular2/test/platform/dom/events/key_events_spec.ts,不知道目前是什么状态。甚至有可能它正在工作 https://github.com/angular/angular/issues/523,我自己没试过:)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular2 是否有相当于 $document 的东西 的相关文章

随机推荐