@HostListener和Renderer.listen之间哪个更好？

Question

我正在构建一个类似于http://rectangleworld.com/demos/SimpleDragging/SimpleDragging的简单画布拖放应用程序.对于mouseevent监听器,我使用了@Hostlistener,因为对我来说它具有更简单的语法并且它正在工作.使用Renderer.listen可以实现另一种方法.但我不能决定在hostlistener上使用它.谁能解释,并告诉这是间更好的@HostListener和Renderer.listen？

Answer 1

我的答案可能不是最好的，但这是我得到的。

Renderer.listen()

当涉及到Renderer.listen()你需要传递Element要检测，然后Event听（click，keydown，keyup等），最后回调Function

在代码中，这是listen()函数 (*) 中发生的事情：

listen(renderElement: any, name: string, callback: Function): Function {
  return this._rootRenderer.eventManager.addEventListener(renderElement, name, decoratePreventDefault(callback));
}

所以问题现在只是指定Element（简单）但人们通常使用根据Angular 文档elementRef.nativeElement这是一个安全风险，所以在使用它之前一定要确保！。另一个问题（不会真的）是该类是实验性的（检查它的文档），我遇到了一个问题，它曾经在 RC 中工作，但现在不是......所以是的，在使用它们之前先测试一下功能。aaaaaa 完成后，您需要手动取消绑定事件！，查看此答案了解更多信息。RenderersetText()Renderer

但我会密切关注Renderer状态，因为它的主要目的是使用一个代码库在任何环境（Web、Node、Mobiles 等）上渲染元素，所以是的，让我们希望它在未来变得稳定。

@HostListener()

HostListener是一个很棒的装饰器，它展示了 Angular2 与 TypeScript 一起工作的效果，你只需要设置事件和传递给回调函数（它下面的函数）的值，通常人们只是通过[$event]这样你就可以对验证有更多的控制在函数内部，是的，您不需要设置 ，Element因为它会侦听 ，document因此它正在delegation对事件进行处理，而您无法访问 ，DOM并且您的应用程序将受到保护。此外，您不需要取消绑定事件，Angular 会为您完成。

检查这篇文章以获得一个工作示例

希望我的回答有所帮助，请记住 Angular 仍在不断发展，因此有些事情可能会发生变化。

参考：

*: Hacking Angular2: Binding Multiple DOM Events by Sean T. Larkin