Unterschied zwischen Renderer und ElementRef in eckigen 2

Renderer ist eine Klasse, die eine partielle Abstraktion über das DOM darstellt. Die Verwendung von Renderer für die Manipulation des DOM unterbricht weder serverseitiges Rendering noch Web Workers (wo der direkte Zugriff auf das DOM unterbrochen würde).

ElementRef ist eine Klasse, die einen Verweis auf ein DOM-Element enthalten kann. Dies ist wiederum eine Abstraktion, um Umgebungen, in denen das Browser-DOM nicht verfügbar ist, nicht zu unterbrechen.

Wenn ElementRef in eine Komponente injiziert wird, ist die injizierte Instanz eine Referenz auf das Host-Element der aktuellen Komponente.

Es gibt noch andere Möglichkeiten, eine ElementRef -Instanz wie @ViewChild() , @ViewChildren() , @ContentChild() , @ContentChildren() zu erwerben. In diesem Fall ist ElementRef eine Referenz auf die übereinstimmenden Elemente in der Vorlage oder den untergeordneten Elementen.

Renderer und ElementRef sind nicht "entweder dies oder das", sondern müssen zusammen verwendet werden, um die volle Plattform-Abstraktion zu erhalten.

Renderer wirkt auf das DOM und ElementRef ist eine Referenz auf ein Element im DOM, auf das Renderer wirkt.

Beachten Sie, dass Sie ElementHref nicht verwenden sollten, da es mit einem Sicherheitsrisiko gekennzeichnet ist.

Angular 2 Dokumentation:

"Wenn Sie direkten Zugriff auf das DOM erlauben, kann Ihre Anwendung anfälliger für XSS-Angriffe werden. Überprüfen Sie die Verwendung von ElementRef in Ihrem Code sorgfältig. Weitere Informationen finden Sie im Sicherheitshandbuch."

"Verwenden Sie diese API als letzten Ausweg, wenn direkter Zugriff auf DOM benötigt wird. Verwenden Sie Templating und Datenbindung, die von Angular bereitgestellt werden. Alternativ sehen Sie sich Renderer an, der eine API bereitstellt, die auch bei direktem Zugriff verwendet werden kann native Elemente werden nicht unterstützt. "