2016-09-30 3 views
8

RendererElementRef의 차이점은 무엇입니까? Angular에서는 둘 모두 DOM 조작에 사용됩니다. 나는 현재 각도 2 지침을 작성하는 데에만 ElementRef을 사용하고 있습니다. Renderer에 대한 자세한 정보를 얻으면 나중에 사용할 수 있습니다.각도 2의 렌더러와 ElementRef의 차이

답변

22

Renderer은 DOM을 부분적으로 추상화하는 클래스입니다. DOM 조작을 위해 Renderer을 사용해도 서버 측 렌더링 또는 웹 작업자 (DOM에 대한 직접 액세스가 중단되는 경우)가 손상되지 않습니다.

ElementRef은 DOM 요소에 대한 참조를 보유 할 수있는 클래스입니다. 이것은 다시 브라우저 DOM이 실제로 사용 가능하지 않은 환경에서 중단되지 않는 추상화입니다.

ElementRef이 구성 요소에 주입되는 경우 주입 된 인스턴스는 현재 구성 요소의 호스트 요소에 대한 참조입니다.

@ViewChild(), @ViewChildren(), @ContentChild(), @ContentChildren() 같은 ElementRef 인스턴스를 취득 할 수있는 다른 방법이 있습니다. 이 경우 ElementRef은 템플릿 또는 하위 항목과 일치하는 요소에 대한 참조입니다.

ElementRef은 "어느 쪽이든"이 아니라 전체 플랫폼 추상화를 위해 함께 사용해야합니다.

Renderer은 DOM에서 작동하고 ElementRefRenderer에서 작동하는 DOM의 요소에 대한 참조입니다.

+0

왜 렌더러 메소드는'viewContainerRef'처럼'elementRef'를 사용하는 대신'elementRef.nativeElement'를 필요로하는지 궁금합니다. 이것은 약간 모순 된 것 같습니다. 어떤 아이디어? –

+0

일관성없는 것처럼 보입니다.하지만 그렇지 않다고 생각합니다. 이전 베타 버전에서는'renderer'가'ElementRef'를 가져 왔지만 나중에 변경했습니다. 나는'Universal'과 같은 플랫폼에서'ElementRef.nativeElement'는 실제로 DOM 요소를 참조하지 않는다고 생각합니다. https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html을 체크하면'nativeElement'는'HTMLElement' 대신에'any' 타입입니다. –

+0

_ 이전에는 베타 버전 렌더러는 ElementRef를 가져 왔지만 나중에 변경했습니다 ._ 흥미 롭습니다. 감사합니다. 네, nativeElement는 플랫폼 특정 요소를 참조 할 수 있지만 elementRef.nativeElement 대신 elementRef를 전달하면 여전히 높은 추상화가 적용되며 어떤 식 으로든 작동합니다. –

2

ElementHref가 보안 위험 요소로 표시되어있어 사용을 자제해야합니다.

"XSS 공격에 응용 프로그램이 더 취약해질 수있는 DOM에 직접 액세스를 허가 조심스럽게 코드에서하여 elementRef의 사용을 검토 자세히를 들어, 보안 가이드를 참조하십시오..이 문서

각도. "

"DOM에 직접 액세스해야하는 경우이 API를 사용하십시오. 대신 Angular가 제공하는 템플릿 및 데이터 바인딩을 사용하거나 직접 액세스 할 때 안전하게 사용할 수있는 API를 제공하는 Renderer를 살펴보십시오 네이티브 요소는 지원되지 않습니다. "

+6

사실'ElementRef' 자체를 사용하는 것은 해를 끼치 지 않습니다. 범인은'ElementRef.nativeElement'입니다. 사용자가 제공 한 데이터를 사용하여 DOM에 추가하는 경우 IMHO (보안 전문가를 제외한 모든 사용자)의 보안 관련 사항입니까? –