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

Question

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

Answer 1

这Renderer是一个对DOM进行部分抽象的类.使用Rendererfor操作DOM不会破坏服务器端呈现或Web Workers(对DOM的直接访问会中断).

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

如果ElementRef注入到组件,则注入的实例是对当前组件的主机元素的引用.

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

Renderer并且ElementRef不是"这个或那个",而是它们必须一起使用才能获得完整的平台抽象.

Renderer作用于DOM,并且ElementRef是对DOM 中的元素的引用Renderer.

Answer 2

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

Angular 2文档:

"允许直接访问DOM可能会使您的应用程序更容易受到XSS攻击.请仔细检查代码中ElementRef的任何使用.有关更多详细信息,请参阅"安全指南".

"使用这个API,因为需要给DOM直接访问时,不得已而为之.使用模板和数据绑定的角度提供来代替.另外,你看看渲染器,其提供的API,可安全使用,即使以自然元素直接访问不支持."