角度2中Renderer和ElementRef之间的差异

Question

Renderer和ElementRef之间有什么区别？在Angular中，两者都用于DOM操作。我目前正在单独使用ElementRef来编写Angular 2指令。如果我获得有关Renderer的更多信息，我可以在以后的指令中使用它。

Answer 1

Renderer是一个对DOM进行部分抽象的类。 使用Renderer来操作DOM不会破坏服务器端呈现或Web Workers（直接访问DOM会破坏）。

ElementRef是一个可以保存对DOM元素的引用的类。 这又是一个抽象，在浏览器DOM实际上不可用的环境中不会中断。

如果ElementRef被注入组件，则注入的实例是对当前组件的host元素的引用。

还有其他方法可以获取ElementRef，@ViewChild()，@ViewChildren()，@ContentChild()等@ContentChildren()个实例。在这种情况下，ElementRef是对模板或子项中匹配元素的引用。

Renderer和ElementRef不是“这个或那个”，而是必须一起使用才能获得完整的平台抽象。

Renderer对DOM采取行动，ElementRef是对Renderer行动的DOM中元素的引用。

Answer 2

请注意，您应该避免使用ElementHref，因为它标记了安全风险。

Angular 2文档：

“允许直接访问DOM可能会使您的应用程序更容易受到XSS攻击。请仔细阅读代码中对ElementRef的任何使用。有关详细信息，请参阅”安全指南“。

“当需要直接访问DOM时，使用此API作为最后的手段。请使用Angular提供的模板和数据绑定。或者，您可以查看提供可以安全使用的API的Renderer，即使直接访问不支持原生元素。“