В чем разница между Renderer и ElementRef? В Angular оба используются для манипулирования DOM. В настоящее время я использую только ElementRef для написания директив Angular 2. Если я получу больше информации о Renderer, я смогу использовать ее в своих будущих директивах.
Разница между Renderer и ElementRef в angular 2
Ответы (2)
Renderer — это класс, являющийся частичной абстракцией над DOM. Использование Renderer для управления DOM не нарушает рендеринг на стороне сервера или веб-воркеров (где прямой доступ к DOM может быть нарушен).
ElementRef — это класс, который может содержать ссылку на элемент DOM. Это снова абстракция, чтобы не сломаться в средах, где DOM браузера фактически недоступен.
Если ElementRef внедряется в компонент, внедренный экземпляр является ссылкой на элемент хоста текущего компонента.
Есть и другие способы получить экземпляр ElementRef, например @ViewChild(), @ViewChildren(), @ContentChild(), @ContentChildren(). В этом случае ElementRef является ссылкой на соответствующий элемент(ы) в шаблоне или дочерних элементах.
Renderer и ElementRef не являются «ни тем, ни другим», вместо этого их нужно использовать вместе, чтобы получить полную абстракцию платформы.
Renderer действует на DOM, а ElementRef является ссылкой на элемент в DOM, на который действует Renderer.
person
Günter Zöchbauer
schedule
30.09.2016
Мне интересно, почему методы рендеринга требуют
elementRef.nativeElement вместо работы с elementRef, например viewContainerRef. Это кажется немного непоследовательным. Любые идеи?
- person Max Koretskyi; 03.03.2017
Это выглядит противоречиво, но я думаю, что это не так. В более ранних бета-версиях
renderer просто брал ElementRef, но позже они изменили его. Я думаю, что на таких платформах, как Universal ElementRef.nativeElement на самом деле не относится к элементу DOM. Если вы отметите angular.io/docs/ts/latest /api/core/index/ElementRef-class.html вы увидите, что nativeElement имеет тип any вместо HTMLElement
- person Günter Zöchbauer; 03.03.2017
В более ранних бета-версиях рендерер просто брал ElementRef, но позже они изменили его. - интересно, спасибо. да,
nativeElement может относиться к элементам, специфичным для платформы, но передача elementRef вместо elementRef.nativeElement по-прежнему является более высокой абстракцией и будет работать в любом случае.
- person Max Koretskyi; 03.03.2017
Я не помню, чтобы я видел причину, по которой они изменили это.
- person Günter Zöchbauer; 03.03.2017
Только что проверенные источники, существующий рендерер устарел в самых последних версиях.
- person Max Koretskyi; 03.03.2017
Кажется, я видел нечто подобное упомянутому. Я пока не знаю, каким будет альтернативный подход.
- person Günter Zöchbauer; 03.03.2017
Обратите внимание, что вам следует воздерживаться от использования ElementHref, так как он помечен как угроза безопасности.
Документация по Angular 2:
«Разрешение прямого доступа к DOM может сделать ваше приложение более уязвимым для XSS-атак. Внимательно изучите любое использование ElementRef в вашем коде. Для получения дополнительной информации см. Руководство по безопасности».
«Используйте этот API в крайнем случае, когда необходим прямой доступ к DOM. Вместо этого используйте шаблоны и привязку данных, предоставляемые Angular. В качестве альтернативы вы можете взглянуть на Renderer, который предоставляет API, который можно безопасно использовать, даже когда прямой доступ к собственным элементам закрыт. не поддерживается."
person
Omri L
schedule
30.09.2016
На самом деле использование самого
ElementRef не приносит никакого вреда. Виновник ElementRef.nativeElement. Это ИМХО (я всего лишь эксперт по безопасности), относящийся к безопасности только в том случае, если данные, предоставленные пользователем, используются для добавления в DOM, верно?
- person Günter Zöchbauer; 30.09.2016
