angular 2 中 Renderer 和 ElementRef 的区别

Posted 2023-02-22

【中文标题】angular 2 中 Renderer 和 ElementRef 的区别

【英文标题】：Difference between Renderer and ElementRef in angular 2

【发布时间】：2017-02-08 15:41:50

【问题描述】：

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

【参考方案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 作用的元素的引用。

【讨论】：

我想知道为什么渲染器方法需要elementRef.nativeElement 而不是像viewContainerRef 那样使用elementRef。这似乎有点不一致。有什么想法吗？

看起来不一致，但我认为不是。在早期的 beta 版本中，renderer 只是采用了ElementRef，但后来他们更改了它。我认为在Universal ElementRef.nativeElement 这样的平台上实际上并不指代DOM 元素。如果您检查angular.io/docs/ts/latest/api/core/index/ElementRef-class.html，您将看到nativeElement 的类型为any 而不是HTMLElement

在早期的 beta 版本中，渲染器只使用了 ElementRef，但后来他们更改了它。 - 这很有趣，谢谢。是的，nativeElement 可以引用特定于平台的元素，但是传递 elementRef 而不是 elementRef.nativeElement 仍然是一个更高的抽象，并且可以以任何方式工作

我不记得有提到他们改变它的原因。

刚刚检查了来源，现有渲染器在最新版本中已被弃用。

【参考方案2】：

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

Angular 2 文档：

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

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

【讨论】：

其实使用ElementRef本身并没有什么坏处。罪魁祸首是ElementRef.nativeElement。如果用户提供的数据用于添加到 DOM，恕我直言（我只是安全专家）唯一相关的安全性，对吧？