我正在构建一个类似于 http://rectangleworld.com/demos/SimpleDragging/SimpleDragging 的简单 Canvas 拖放应用程序.对于鼠标事件监听器,我使用了@HoSTListener,因为对我来说它具有更简单的语法并且可以正常工作。还有另一种方法可以通过 Renderer.listen 实现。但我不能决定在 hoSTListener 上使用它。谁能解释一下 @HostListener
和 Renderer.listen
哪个更好?
最佳答案
我的回答可能不是最好的,但这是我得到的。
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
关于angular - @HostListener 和 Renderer.listen 哪个更好?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40610226/