angular - @HostListener 和 Renderer.listen 哪个更好？

Question

我正在构建一个类似于 http://rectangleworld.com/demos/SimpleDragging/SimpleDragging 的简单 Canvas 拖放应用程序.对于鼠标事件监听器，我使用了@HoSTListener，因为对我来说它具有更简单的语法并且可以正常工作。还有另一种方法可以通过 Renderer.listen 实现。但我不能决定在 hoSTListener 上使用它。谁能解释一下 @HostListener 和 Renderer.listen 哪个更好？

Answer 1

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

Renderer.listen()

当涉及到 Renderer.listen() 时，您需要传递要检测的 Element，然后是 Event 监听(click、keydown、keyup 等)，最后是 回调函数

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

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

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

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

@HostListener()

HostListener 是一个很棒的装饰器，展示了 Angular2 与 TypeScript 的协同工作，你只需要设置事件和传递给回调函数(它下面的函数)的值，通常人们只需传递 [$event] 这样您就可以更好地控制函数内部的验证，是的，您不需要设置 Element 因为它会监听 document 所以它正在对事件执行 delegation 并且您不访问 DOM 并且您的应用程序将受到保护。此外，您不需要取消绑定(bind)事件，Angular 会为您完成。

Check this article for a working example

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

引用资料:

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