angular4のRenderer2とは何ですか？なぜjqueryよりも優先されますか？

Question

Renderer2がDOM操作のために使われている理由とその理由を理解したい。 Renderer2またはネイティブのjavascriptの代わりに、豊かで有名なライブラリjQueryを使用できますか？ jQuery上でRenederer2を使用する利点

Answer 1

通常のブラウザコンテキストでは、Renderer2はDOM操作ブラウザAPIの単純なデフォルトラッパーです。例えば、ここではその方法のほんの一部のthe implementation次のとおりです。

class DefaultDomRenderer2 implements Renderer2 { 

    addClass(el: any, name: string): void { el.classList.add(name); } 

    createComment(value: string): any { return document.createComment(value); } 

    createText(value: string): any { return document.createTextNode(value); } 

    appendChild(parent: any, newChild: any): void { parent.appendChild(newChild); } 

それは離れて、純粋なDOM要素から抽象レンダリング操作に導入されています。たとえば、あなたはこのようにそれを行うだろうクラスを追加する必要がある場合：

ここ

constructor(el: ElementRef, renderer: Renderer2) { 
    renderer.addClass(el.nativeElement, 'some'); 
} 

あなたはネイティブの要素と直接対話することはありませんし、あなたがしたいどのようにそのAPIを使用していないことがわかりますjQueryを使ってそれ：

constructor(el: ElementRef) { 
    $(el.nativeElement).addClass('some'); 
} 

レンダラを使用してコードを使用すると、そのほかのプラットフォームに固有のレンダラーの異なる実装を提供する場合、DOM以外のプラットフォーム上で実行することができるという利点があります。たとえば、AngularはWebワーカーWebWorkerRenderer2に対してRenderer2の実装を提供します。それはpostMessageメソッドを使用してaddClassのようなAPIのメソッドを実装し、DOMを更新する必要があるメインアプリケーションと通信します。