我正在構建一個類似於http://rectangleworld.com/demos/SimpleDragging/SimpleDragging的簡單畫布拖放應用程序。對於mouseevent偵聽器,我使用了@Hostlistener,因爲對我來說它有更簡單的語法,並且它正在工作。還有另一種方法可以通過Renderer.listen實現它。但我不能決定通過hostlistener來使用它。任何人都可以解釋並告訴@HostListener
和Renderer.listen
哪個更好?@HostListener和Renderer.listen哪個更好?
回答
我的答案可能不是最好的,但這是我得到的。
Renderer.listen()
當談到Renderer.listen()
需要傳遞要檢測的Element
,則Event
聽(click
,,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
類是實驗性的(Check its Documentation),我遇到了一個問題,setText()
它曾經在RC中工作,但現在它不是..所以是在測試Renderer
功能之前使用它們。 aaaaaaand當你完成你需要手動解除事件!,Check this answer for more。
但我會密切關注Renderer
狀態,因爲它的主要目的是在任何環境(Web,Node,Mobiles,.etc)上渲染元素,只需一個代碼庫,所以是的,希望它能夠變得穩定未來。
@HostListener()
HostListener
是一個偉大的裝飾,並說明如何偉大Angular2可與打字稿,你只需要設置的事件和值傳遞給回調函數(下它的功能) ,通常人們只是通過[$event]
,因此您可以更多地控制該功能中的驗證,並且您不需要設置Element
,因爲它會監聽document
,因此它正在爲事件執行delegation
,並且您不能訪問DOM
和您的應用程序將被保護。你也不需要解除事件,Angular會爲你做。
Check this article for a working example
希望我的回答幫助,記住角仍在不斷髮展使一些事情可能會發生變化。
參考文獻:
*:Hacking Angular2: Binding Multiple DOM Events by Sean T. Larkin
- 1. 哪個更好
- 2. 哪一個更好?
- 3. 哪個listview更好?
- 4. 哪一個更好?
- 5. 哪個JSON更好
- 6. 哪一個比iPhone和Android更好?
- 7. Android OnClick和onTouch:哪一個更好?
- 8. 在MySQL DELETE和UPDATE哪個更好?
- 9. jquery iphone ui和jqtouch,哪個更好?
- 10. 「if」和「#if」;哪一個更好用
- 11. C setjmp.h和ucontext.h,哪個更好?
- 12. (else)if和||工作,哪個更好?
- 13. 哪個更好? OpenCyc或ConceptNet?
- 14. ACRA vs UncaughtExceptionHandler哪個更好?
- 15. CDN vs FTP ..哪個更好
- 16. 哪個JQuery document.ready更好?
- 17. SQL中哪一個更好?
- 18. 哪個更好H2或HSQLDB?
- 19. jqGrid或dataTable,哪個更好?
- 20. PHP:ParseCSV或PHPExcel哪個更好?
- 21. 哪個更好BOOST_MPL_ASSERT或BOOST_STATIC_ASSERT?
- 22. mosso與gogrid哪個更好?
- 23. 哪個更好,Nagios或Sensu?
- 24. codeigniter,zend-framework哪個更好
- 25. Qt4 vs JavaFX。哪個更好?
- 26. 哪個更好... GATE或RapidMiner
- 27. 哪個更好 - PyInstaller或cx_Freeze?
- 28. J2me Httpconnection,哪一個更好?
- 29. 表分區,哪個更好?
- 30. 哪個更好c89或c99
'nativeElement'不若與Render2使用的問題(安全或其他)。查看您鏈接到的Angular Docs頁面上的其他警告。 – TimTheEnchanter