Javascript 如何在Ember js 3.13中正确处理按键事件

我是Ember的新手&我想捕捉一个全局按键事件并在我的组件中处理它

在进行了大量的web爬行之后，我使用global

window.onkeydown=this.handleKeyPress

&在handleKeyPress函数中，我编写了一些代码并调用了

this.moveplayerDirection

，但现在我的“this”就是窗口

onKeyPress(e, comp) {
    let keyCode = e.keyCode;`

    if (keyCode === KEY_LEFT ||
        keyCode === KEY_UP ||
        keyCode === KEY_RIGHT ||
        keyCode === KEY_DOWN) {
        let direction;

        switch(e.keyCode) {
            case KEY_LEFT:
                direction = {x: -1, y: 0}
                break;
            case KEY_RIGHT:
                direction = {x: 1, y: 0}
                break;
            case KEY_UP:
                direction = {x: 0, y: -1}
                break;
            case KEY_DOWN:
                direction = {x: 0, y: 1}
                break;
        }
        this.movePlayerInDirection(direction);
    }
}

这是参加这次活动的最佳方式吗？（余烬之路）

如何从窗口范围访问组件函数

更新：

---

根据下面的答案，我刚刚添加了

window.onkeydown=this.onKeyPress.bind（this）

，它起作用了

没有特殊的余烬方法可以做到这一点。但是也有像

ember键盘快捷键那样的插件

不过，通常使用
window.addEventListener
并不是一个坏主意。但是，您需要做两件事：

当组件被销毁时清理侦听器
将事件绑定到函数上下文
对于经典组件，这可能如下所示：

Component.extend({
  init() {
    this.boundOnKeyPress = this.onKeyPress.bind(this);
  },
  didInsertElement() {
    window.addEventListener('keypress', this.boundOnKeyPress);
  },
  willDestroy() {
    window.removeEventListener('keypress', this.boundOnKeyPress);
  },
  onKeyPress() {
    ...
  }
})

我更喜欢用插件做这项工作。下面的链接很好地解释了它提供的功能，

首先，你需要将mixin添加到你的组件中

import Ember from 'ember';
import { EKMixin } from 'ember-keyboard';

export default Ember.Component.extend(EKMixin, {
  . . . .
});

然后需要将
keyboardActivated
属性设置为true。下面的代码将在init方法之后调用

activateKeyboard: Ember.on('init', function() {
    this.set('keyboardActivated', true);
  })

您应导入所需的事件

import { keyPress } from 'ember-keyboard';

onKeyPressHandler: Ember.on(keyPress('Escape'), function() {
        // console.log('escape button pressed');        
    }),

在您的情况下，如果您希望为每个按键触发一个事件，那么就不要为keypup或keypdown提供一个keystring。这是一种为大范围按键触发事件的简便方法，例如在任何字母数字按键上。例如：

import { getCode } from 'ember-keyboard';

triggerOnAlphaNumeric: Ember.on(keyUp(), function(event) {
  if (/^Key\w(?!.)/.test(getCode(event))) {
    ...
  }
})

我们之所以这样写，是因为它提供了比其他任何关键事件插件更干净的接口。具体地说，它提供了一个服务，因此您可以在任何地方注入它，而不必使用mixin（现在不推荐使用mixin）。
无法工作。。。keypress事件没有受到攻击（或被捕获），我根据您的解决方案尝试了一些方法，只有当我使用以下语法设置事件侦听器时，它才起作用：
window.onkeydown=this.onKeyPress.bind（this）
您应该始终更喜欢
addEventListener
，而不是在{eventname}

属性上分配

，因为分配属性将覆盖以前的事件侦听器。这也确实有效。如果没有，你有余烬旋转的复制品吗？