角度6:HostListener装饰器被生产构建破坏

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

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) {
    // ...
  }

在开发过程中效果很好。利用一个用户代理切换器,我可以验证每个平台是否被识别,以及是否监听了相应的密钥。然而,确实如此 不 在生产中工作。如果应用程序经历了构建过程,那么 没有人 事件的监听器开火。

编辑: 我试着改变一些东西,结果得到一个错误 Function calls are not supported in decorators . 谷歌搜索发现这是Angular AoT编译器的一个约束。我认为Angular的编译器不支持这种动态行为。我是靠听音乐来解决的 keydown 事件,并添加第二个修饰符,该修饰符可以向下筛选到正确的键组合。