我正在构建一个类似于http://rectangleworld.com/demos/SimpleDragging/SimpleDragging的简单画布拖放应用程序。对于mouseevent监听器，我使用了@Hostlistener，因为对我来说它具有更简单的语法并且它正在工作。使用Renderer.listen实现它的另一种方法。但我不能决定在hostlistener上使用它。任何人都可以解释并告诉@HostListener和Renderer.listen之间哪个更好？
答案 0 :(得分：4)
我的回答可能不是最好的，但这就是我得到的。
说到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 Documentation使用elementRef.nativeElement这是安全风险，所以在使用之前一定要确定！另一个问题（不会真的）是Renderer类是实验性的（Check its Documentation），我遇到了setText()它曾经在RC中工作的问题，但现在它已经出现了问题不是..所以是的，在使用它们之前测试Renderer功能是否良好。 aaaaaaand当你完成后，你需要手动取消绑定事件！Check this answer for more。
但我会密切关注Renderer状态，因为它的主要目的是在任何环境（Web，Node，Mobiles，.etc）上使用一个代码库渲染元素，所以是的，让＃39}希望它在未来变得稳定。
HostListener是一个很棒的装饰器，它展示了Angular2如何与TypeScript一起工作，你只需要设置事件和传递给回调函数的值（它下面的函数），通常人们只需要传递{ {1}}因此您可以更好地控制功能内部的验证，并且您不需要设置[$event]，因为它会监听Element所以它正在进行事件document，您无法访问delegation，您的应用将受到保护。你也不需要解开事件，Angular会为你做这件事。
Check this article for a working example
希望我的回答有所帮助，请记住Angular仍在不断发展，因此有些事情可能会改变。
参考文献：
*：Hacking Angular2: Binding Multiple DOM Events by Sean T. Larkin