我正在構建一個類似於http://rectangleworld.com/demos/SimpleDragging/SimpleDragging的簡單畫布拖放應用程序。對於mouseevent偵聽器，我使用了@Hostlistener，因爲對我來說它有更簡單的語法，並且它正在工作。還有另一種方法可以通過Renderer.listen實現它。但我不能決定通過hostlistener來使用它。任何人都可以解釋並告訴@HostListener和Renderer.listen哪個更好？@HostListener和Renderer.listen哪個更好？

2016-11-15 Emmanuel Sayson

我的答案可能不是最好的，但這是我得到的。

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

來源

2017-01-17 10:19:34

'nativeElement'不若與Render2使用的問題（安全或其他）。查看您鏈接到的Angular Docs頁面上的其他警告。 – TimTheEnchanter

@HostListener和Renderer.listen哪個更好？

回答

Renderer.listen（）

@HostListener（）

相關問題