Question

我的应用程序注册了热键侦听器，以允许用户仅使用键盘执行操作。这是一个示例：

  @HostListener('document:keydown.meta.a', ['$event'])
  selectAllHotkey(event: KeyboardEvent) {
    event.preventDefault();
    this.nodes = this.nodes.map(node => {
      node.is_selected = true;
      return node;
    });
  }

此方法在组件内部，可以正常工作。但是，最近，用户请求了特定于平台的热键（即，使用Control而不是Command）。为此，我创建了以下功能：

export function userAgentToggle<D>(window: Window, pcValue: D, osxValue: D): D {
  if (window.navigator.userAgent.indexOf('Mac OS X') === -1) {
    return pcValue;
  } else {
    return osxValue;
  }
}

此函数所做的全部工作是根据用户代理返回两个参数之一。我可以这样应用它：

  @userAgentToggle(
    window,
    HostListener('document:keydown.control.a', ['$event']),
    HostListener('document:keydown.meta.a', ['$event'])
  )
  selectAllHotkey(event: KeyboardEvent) {
    // ...
  }

这在开发中效果很好。利用用户代理切换器，我可以验证每个平台都可以识别并且侦听了适当的密钥。但是，它在生产中无效。如果应用程序经历了构建过程，则事件监听器的 none 都不会触发。

通常我会认为这是我的代码有问题，但是它在dev中起作用的事实使我认为这可能是编译器错误。我是在做错什么，还是应该提交Angular错误凭单？

编辑：我尝试转移内容，最后收到一个错误消息，提示Function calls are not supported in decorators。谷歌搜索发现这是Angular AoT编译器的约束。我认为Angular的编译器不支持具有这种动态行为。我只通过听keydown事件，然后添加第二个装饰器来筛选出正确的组合键来解决这个问题。

Angular 6：生产构建破坏了HostListener装饰器

0 个答案: