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

Renderer.listen()

当谈到Renderer.listen()时,你需要传递你想要检测的元素,然后传递要监听的事件(click,keydown,keyup等),最后是回调函数

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

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

所以问题现在只是指定元素(简单),但人们通常使用elementRef.nativeElement,这是一个安全风险,根据Angular Documentation,所以在使用之前一定要确定！另一个问题(不会真的)是Renderer类是实验性的(Check its Documentation),我遇到了setText()的问题,它曾经在RC中工作但是现在它不是..所以是的,在使用它们之前测试Renderer功能是否正常. aaaaaaand当你完成后,你需要手动取消绑定事件！,Check this answer for more.

但是我会关注渲染器的状态,因为它的主要目的是在任何环境(Web,Node,Mobiles,.etc)上渲染元素,只有一个代码库,所以是的,我们希望它在未来变得稳定.

@HostListener()

HostListener是一个很棒的装饰器,它展示了Angular2与TypeScript一起工作的好处,你只需要设置事件和传递给回调函数的值(它下面的函数),通常人们只需传递[$event]就可以了更多地控制函数内部的验证,并且您不需要设置元素,因为它会监听文档,因此它会对事件进行委派,而您不会访问DOM,您的应用程序将受到保护.你也不需要解开事件,Angular会为你做这件事.

Check this article for a working example

希望我的回答有所帮助,记住Angular仍在不断发展,所以有些事情可能会改变.

参考文献：

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