Angular 2 中Renderer 和ElementRef 的区别

Question

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

Answer 1

Renderer是一个对 DOM 进行部分抽象的类。 使用Renderer来操作 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 的任何使用。有关更多详细信息，请参阅安全指南。”

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