Renderer
과 ElementRef
의 차이점은 무엇입니까? Angular에서는 둘 모두 DOM 조작에 사용됩니다. 나는 현재 각도 2 지침을 작성하는 데에만 ElementRef
을 사용하고 있습니다. Renderer
에 대한 자세한 정보를 얻으면 나중에 사용할 수 있습니다.각도 2의 렌더러와 ElementRef의 차이
답변
Renderer
은 DOM을 부분적으로 추상화하는 클래스입니다. DOM 조작을 위해 Renderer
을 사용해도 서버 측 렌더링 또는 웹 작업자 (DOM에 대한 직접 액세스가 중단되는 경우)가 손상되지 않습니다.
ElementRef
은 DOM 요소에 대한 참조를 보유 할 수있는 클래스입니다. 이것은 다시 브라우저 DOM이 실제로 사용 가능하지 않은 환경에서 중단되지 않는 추상화입니다.
ElementRef
이 구성 요소에 주입되는 경우 주입 된 인스턴스는 현재 구성 요소의 호스트 요소에 대한 참조입니다.
는 @ViewChild()
, @ViewChildren()
, @ContentChild()
, @ContentChildren()
같은 ElementRef
인스턴스를 취득 할 수있는 다른 방법이 있습니다. 이 경우 ElementRef
은 템플릿 또는 하위 항목과 일치하는 요소에 대한 참조입니다.
및 ElementRef
은 "어느 쪽이든"이 아니라 전체 플랫폼 추상화를 위해 함께 사용해야합니다.
Renderer
은 DOM에서 작동하고 ElementRef
은 Renderer
에서 작동하는 DOM의 요소에 대한 참조입니다.
ElementHref가 보안 위험 요소로 표시되어있어 사용을 자제해야합니다.
"XSS 공격에 응용 프로그램이 더 취약해질 수있는 DOM에 직접 액세스를 허가 조심스럽게 코드에서하여 elementRef의 사용을 검토 자세히를 들어, 보안 가이드를 참조하십시오..이 문서
각도. "
"DOM에 직접 액세스해야하는 경우이 API를 사용하십시오. 대신 Angular가 제공하는 템플릿 및 데이터 바인딩을 사용하거나 직접 액세스 할 때 안전하게 사용할 수있는 API를 제공하는 Renderer를 살펴보십시오 네이티브 요소는 지원되지 않습니다. "
사실'ElementRef' 자체를 사용하는 것은 해를 끼치 지 않습니다. 범인은'ElementRef.nativeElement'입니다. 사용자가 제공 한 데이터를 사용하여 DOM에 추가하는 경우 IMHO (보안 전문가를 제외한 모든 사용자)의 보안 관련 사항입니까? –
- 1. 각도 약속 객체의 차이
- 2. 각도 2의 유형은 무엇입니까?
- 3. 각도 2의 var 참조
- 4. 각도 2의 동적 파이프
- 5. 각도 2의 컨트롤러에 해당합니다.
- 6. 각도 2의 주석 편집기
- 7. 각도 2의 적용 상수는?
- 8. 각도 2의 바인딩 오류
- 9. 각도 2의 절약 사용
- 10. 각도 2의 딥 링크?
- 11. 각도 2의 경로 설정
- 12. 각도 2의 양식 RC4
- 13. 각도 2의 북마크 가능한 경로
- 14. 각도 2의 사용자 지정 파이프
- 15. 생성자 각도 2의 속성을 선언하십시오.
- 16. 각도 2의 약속을 이해하려고 시도합니다.
- 17. 각도 2의 폼 유효성 확인
- 18. 각도 2의 NodeJs 라우팅 디렉토리
- 19. 각도 2의 부트 스트랩 모달
- 20. 각도 2의 Ui 경로 사용
- 21. 각도 2의 DOM 속성에 액세스
- 22. 각도 2의 HTTP 응답을 기다린다.
- 23. 각도 2의 두 객체 교차하기
- 24. 각도 2의 다이얼로그를 보여주는 방법
- 25. 각도 2의 글로벌 .scss 파일
- 26. 각도 2의 인터페이스 구현 반복?
- 27. Laravel 각도 2의 여권 인증
- 28. 약속의 문제가있는 각도 2의 HTTP
- 29. 렌더러와 변환기의 차이점 ExtJS
- 30. GCC에서 틈새 구멍과 틈새 구멍 2의 차이
왜 렌더러 메소드는'viewContainerRef'처럼'elementRef'를 사용하는 대신'elementRef.nativeElement'를 필요로하는지 궁금합니다. 이것은 약간 모순 된 것 같습니다. 어떤 아이디어? –
일관성없는 것처럼 보입니다.하지만 그렇지 않다고 생각합니다. 이전 베타 버전에서는'renderer'가'ElementRef'를 가져 왔지만 나중에 변경했습니다. 나는'Universal'과 같은 플랫폼에서'ElementRef.nativeElement'는 실제로 DOM 요소를 참조하지 않는다고 생각합니다. https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html을 체크하면'nativeElement'는'HTMLElement' 대신에'any' 타입입니다. –
_ 이전에는 베타 버전 렌더러는 ElementRef를 가져 왔지만 나중에 변경했습니다 ._ 흥미 롭습니다. 감사합니다. 네, nativeElement는 플랫폼 특정 요소를 참조 할 수 있지만 elementRef.nativeElement 대신 elementRef를 전달하면 여전히 높은 추상화가 적용되며 어떤 식 으로든 작동합니다. –