angular - angular 2中Renderer和ElementRef之间的区别

Question

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

Answer 1

Renderer是一个类，它是对 DOM 的部分抽象。使用Renderer操作 DOM 不会破坏服务器端渲染或 Web Worker（直接访问 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 即使在直接访问本机元素时也可以安全使用不支持。”