Renderer
とElementRef
の違いは何ですか? Angularでは、両方ともDOM操作に使用されます。現在、Angular 2ディレクティブの作成にElementRef
のみを使用しています。 Renderer
に関する詳細情報が得られたら、将来のディレクティブでそれを使用できます。
Renderer
は、DOMを部分的に抽象化したクラスです。 DOMを操作するためにRenderer
を使用しても、サーバー側のレンダリングやWeb Workers(DOMへの直接アクセスが破損する場所)は破損しません。
ElementRef
は、DOM要素への参照を保持できるクラスです。これもブラウザーDOMが実際に利用できない環境で壊れないための抽象化です。
ElementRef
がコンポーネントに挿入される場合、挿入されるインスタンスは現在のコンポーネントのHost要素への参照です。
@ViewChild()
、@ViewChildren()
、@ContentChild()
、@ContentChildren()
など、ElementRef
インスタンスを取得する方法は他にもあります。この場合、ElementRef
は、テンプレートまたは子の一致する要素への参照です。
Renderer
とElementRef
は「これでもあれでも」ではありませんが、プラットフォームの完全な抽象化を得るために一緒に使用する必要があります。
Renderer
はDOMに作用し、ElementRef
はRenderer
が作用するDOM内の要素への参照です。
ElementHrefにはセキュリティリスクのフラグが付いているため、ElementHrefの使用は控えてください。
Angular 2ドキュメント:
「DOMへの直接アクセスを許可すると、アプリケーションがXSS攻撃に対して脆弱になる可能性があります。コード内のElementRefの使用を慎重に確認してください。詳細については、セキュリティガイドを参照してください。」
「DOMへの直接アクセスが必要な場合は、このAPIを最後の手段として使用してください。代わりにAngularによって提供されるテンプレートとデータバインディングを使用してください。ネイティブ要素への直接アクセスがサポートされていない場合でも使用されます。」