如何使用主机监听器答案

【问题标题】：How to use HostListener如何使用主机监听器
【发布时间】：2016-07-20 20:22:34
【问题描述】：

我想知道如何使用@HostListener。我发现的唯一信息在cheatsheet：

@HostListener('click', ['$event']) onClick(e) {...}

我正在尝试记录用户单击的元素。我试过这样：

@HostListener('click')({
    onClick(e) {
        console.log(e)
    }
})

然后我收到以下错误：

TypeError: decorator is not a function(…)

有什么想法吗？

【问题讨论】：

标签： angular

【解决方案1】：

错误信息非常准确。装饰器只是用来装饰一个函数（或一个类、字段、参数……），只需将它放在要装饰的代码之前即可：

@HostListener('click', ['$event'])
onClick(e) {
  console.log(e)
}

【讨论】：

谢谢！我的问题还在于我把它放在了课堂之外。关于为什么“e”可能未定义的任何想法？
类的替代“外部”是将其添加到@Component()（或@Directive() 装饰器，如@Component({ ... , host: {'(click)':'onClick($event)'})，它与我的答案中的代码相同。实际上不，如果@ 987654327@ 被调用，e 应该有一个值。如果['$event.target'] 有什么不同，你能试试吗？
当我添加 $event.target 后，它按预期工作。
有趣。带有$event（没有.target）的@Component() 装饰器中的变体呢？
@Halfist 那么你就没有什么可以放装饰器了。可能类似于 stackoverflow.com/a/40652072/217408 中的选项 1（另请参阅 angular.io/api/core/Directive#host）