我正在构建一个类似于http://rectangleworld.com/demos/SimpleDragging/SimpleDragging的简单画布拖放应用程序。 对于mouseevent侦听器，我使用了@Hostlistener，因为对我来说它有更简单的语法，并且它正在工作。 还有另一种方法可以通过Renderer.listen实现它。 但我不能决定通过hostlistener来使用它。 任何人都可以解释并告诉@HostListener和Renderer.listen哪个更好？

---

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

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 （简单），但人们通常使用elementRef.nativeElement ，根据Angular Documentation，这是一种安全风险，所以在使用它之前一定要确保！ 另一个问题（不会是真的）是Renderer类是实验性的（查看它的文档），我遇到了setText()的问题，它曾经在RC中工作，但现在不是..所以是在使用之前测试Renderer功能他们。 aaaaaaand完成后，您需要手动取消绑定该事件！，请查看此答案以获取更多信息。

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

@HostListener（）

HostListener是一个很棒的装饰器，它展示了Angular2如何与TypeScript协同工作，你只需要设置事件和传递给回调函数（它下面的函数）的值，通常人们只需传递[$event]这样你就可以拥有对函数内部的验证有更多的控制，并且您不需要设置Element因为它监听document因此它正在对事件进行delegation ，并且您不访问DOM并且您的应用程序将受到保护。 你也不需要解除事件，Angular会为你做。

检查这篇文章的工作示例

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

参考文献：

*：黑客Angular2：绑定多个DOM事件作者：Sean T. Larkin

链接地址: http://www.djcxy.com/p/93999.html

上一篇: Which is better between @HostListener and Renderer.listen?

下一篇: Cannot query SQL Server table containing Arabic from my Java app using HQL