Was ist der Unterschied zwischen Renderer und ElementRef? In Angular werden beide für die DOM-Manipulation verwendet. Ich verwende derzeit ElementRef allein zum Schreiben von Angular 2-Direktiven. Wenn ich mehr Informationen über Renderer bekomme, kann ich das in meinen zukünftigen Direktiven verwenden.Unterschied zwischen Renderer und ElementRef in Winkel 2
Die Renderer ist eine Klasse, die eine partielle Abstraktion über das DOM ist. Die Verwendung des Renderer zum Manipulieren des DOM unterbricht nicht das serverseitige Rendering oder Web Workers (bei denen der direkte Zugriff auf das DOM unterbrochen wird).
ElementRef ist eine Klasse, die einen Verweis auf ein DOM-Element enthalten kann. Dies ist wiederum eine Abstraktion, um Umgebungen nicht zu unterbrechen, in denen das Browser-DOM nicht verfügbar ist. Wenn ElementRef in eine Komponente injiziert wird, ist die injizierte Instanz eine Referenz auf das Hostelement der aktuellen Komponente.
Es gibt auch andere Möglichkeiten, um eine ElementRef Instanz wie @ViewChild(), @ViewChildren(), @ContentChildren()@ContentChild(), zu erwerben. In diesem Fall ist ElementRef eine Referenz auf die übereinstimmenden Elemente in der Vorlage oder untergeordneten Elementen.
Renderer und ElementRef sind nicht "entweder dies oder das", sondern sie müssen zusammen verwendet werden, um volle Plattformabstraktion zu erhalten.
Renderer wirkt auf das DOM und ElementRef ist ein Verweis auf ein Element im DOM die Renderer wirkt.
Beachten Sie, dass Sie ElementHref nicht verwenden sollten, da es mit einem Sicherheitsrisiko gekennzeichnet ist.
Angular 2 Dokumentation:
„Permitting direkten Zugriff auf die DOM können Ihre Anwendung anfälliger für XSS-Angriffe machen sorgfältig prüfen jede Verwendung ElementRef im Code Weitere Einzelheiten finden Sie im Sicherheitshandbuch... "
"Verwenden Sie diese API als letzten Ausweg, wenn direkter Zugriff auf DOM benötigt wird. Verwenden Sie stattdessen Template und Datenbindung von Angular. Alternativ sehen Sie sich Renderer an, der eine API bereitstellt, die auch bei direktem Zugriff sicher verwendet werden kann zu nativen Elementen wird nicht unterstützt. "
Eigentlich macht 'ElementRef' selbst keinen Schaden. Der Schuldige ist 'ElementRef.nativeElement'. Dies ist IMHO (ich bin alles andere als ein Sicherheitsexperte) nur sicherheitsrelevant, wenn vom Benutzer bereitgestellte Daten zum DOM hinzugefügt werden, oder? –
Ich frage mich, warum Renderer-Methoden 'elementRef.nativeElement' erfordern, anstatt mit' elementRef' wie 'viewContainerRef' zu arbeiten. Dies scheint ein wenig inkonsistent zu sein. Irgendwelche Ideen? –
Es sieht inkonsistent aus, aber ich denke es ist nicht. In früheren Beta-Versionen hat 'renderer' einfach' ElementRef' genommen, aber später wurde es geändert. Ich denke in Plattformen wie 'Universal' verweist' ElementRef.nativeElement' nicht auf ein DOM Element. Wenn Sie https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html überprüfen, sehen Sie, dass 'nativeElement' vom Typ' any' anstelle von 'HTMLElement' –
_In früher ist Beta-Versionen Renderer nur ElementRef, aber sie änderten es später. _ - das ist interessant, danke. yeah, 'nativeElement' kann auf plattformspezifische Elemente verweisen, aber die Übergabe von elementRef anstelle von elementRef.nativeElement ist immer noch eine höhere Abstraktion und würde auf jeden Fall funktionieren. –