角度2中的渲染器和ElementRef之間的區別

Renderer和ElementRef之間的區別是什麼？在Angular中，兩個都用於DOM操作。我目前單獨使用ElementRef來編寫Angular 2指令。如果我獲得關於Renderer的更多信息，我可以在未來的指令中使用它。角度2中的渲染器和ElementRef之間的區別

來源

2016-09-30 Niyaz

Renderer是一個DOM類的部分抽象類。使用Renderer來操縱DOM不會中斷服務器端呈現或Web工作者（其中直接訪問DOM會中斷）。

ElementRef是一個可以容納對DOM元素的引用的類。這又是一個抽象，在瀏覽器DOM實際上不可用的環境中不會中斷。

如果將ElementRef注入到組件，則注入的實例是對當前組件的主機元素的引用。

還有其他的方法來獲取ElementRef例如像@ViewChild()，@ViewChildren()，@ContentChild()，@ContentChildren()。在這種情況下，ElementRef是對模板或子模塊中匹配元素的引用。

Renderer和ElementRef不是「這個或那個」，而是他們必須一起使用才能獲得完整的平臺抽象。

Renderer作用於DOM而ElementRef是對DOM中的元素的引用Renderer的作用。

來源

2016-09-30 06:39:26

我想知道爲什麼渲染器方法需要'elementRef.nativeElement'而不是像'viewContainerRef'一樣使用'elementRef'。這似乎有點不一致。有任何想法嗎？ –

它看起來不一致，但我認爲它不是。在早期的beta版本中，'renderer'只是使用'ElementRef'，但後來改變了它。我認爲像'Universal'這樣的平臺''ElementRef.nativeElement'實際上並不是指DOM元素。如果你檢查https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html，你會看到'nativeElement'的類型是'any'而不是'HTMLElement' –

_在早些時候測試版本渲染器只是採用了ElementRef，但後來改變了它._ - 這很有趣，謝謝。是的，'nativeElement'可以引用特定於平臺的元素，但是傳遞elementRef而不是elementRef.nativeElement仍然是一個更高的抽象，並且會以任何方式工作 –

請注意，您應該避免使用ElementHref標記爲安全風險。

角2文檔：

「行政法規對DOM的直接訪問可以使你的應用程序更容易遭受XSS攻擊仔細檢查代碼中的任何使用ElementRef的更多詳細信息，請參閱安全指南。「

「使用此API作爲需要直接訪問DOM的最後手段時，請使用由Angular提供的模板和數據綁定，或者您可以查看Renderer，它提供了即使在直接訪問時也可以安全使用的API不支持本地元素。「

來源

2016-09-30 07:17:47

實際上使用'ElementRef'本身不會造成任何傷害。罪魁禍首是'ElementRef.nativeElement'。這是恕我直言（我只是一個安全專家）只有安全相關，如果用戶提供的數據用於添加到DOM，對不對？ –

角度2中的渲染器和ElementRef之間的區別

回答

相關問題