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는 웹 근로자 WebWorkerRenderer2에 대해 Renderer2 구현을 제공합니다. 그것은 postMessage 메서드를 사용하여 addClass과 같은 API 메서드를 구현하여 DOM을 업데이트해야한다는 주 응용 프로그램과 통신합니다.