@HostListenerとRenderer.listenのどちらが良いですか？

Question

私はhttp://rectangleworld.com/demos/SimpleDragging/SimpleDraggingに似た単純なキャンバスドラッグアンドドロップアプリケーションを構築しています。私の場合は、シンプルな構文を持っていて動作しているので、mouseeventリスナーの場合は@Hostlistenerを使用しました。 Renderer.listenでそれを達成する別の方法があります。しかし、私はそれをhostlistenerよりも使うことはできません。誰も説明し、@HostListenerとRenderer.listenの間でどちらが良いか教えてください。

Answer 1

私の答えは最高ではないかもしれませんが、私が得たものです。その後、

Renderer.listen（）

それはRenderer.listen()に来るとき、あなたが検出したいElementを渡す必要があり、Eventなど（click、​​、keyup、に耳を傾けます）そして最後にコールバックFunction

コードでは、で起こったことがあります機能（*）：

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

だから、問題は今ちょうど指定されるだろうElement（簡単な）が、人々は通常、セキュリティリスクAngular Documentationによると、それを使用する前に、必ずあるelementRef.nativeElementを使用！もう1つの問題（実際にはありません）は、Rendererクラスが実験的（Check its Documentation）であることです。setText()で問題が発生しましたが、これはRCで使用されていましたが、今は使用していません。あなたが完了したら、手動でイベントをバインド解除する必要があります！、Check this answer for more。

しかし、私はRendererのステータスを見守っていますが、主な目的は1つのコードベースで任意の環境（Web、Node、Mobiles、.etc）の要素をレンダリングするためです。未来。

@HostListener（）

HostListenerは素晴らしいデコレータあると、あなただけのイベントとコールバック関数に渡される（その下の関数）に値を設定する必要があるかAngular2は、活字体で素晴らしい作品を示します通常、人々は単に[$event]を渡すので、関数内のバリデーションをより詳細に制御することができます。はdocumentをリッスンするので、設定する必要はありません。イベントにdelegationを実行していて、アクセスしませんDOMとアプリが保護されます。また、イベントのバインドを解除する必要はありません、角度はあなたのためにそれを行います。

Check this article for a working example

は角度がまだいくつかの物事が変更される可能性がありますので、進化して覚えて、私の答えの助けを願っています。

参考文献：

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