Renderer 和 ElementRef 有什么区别？在 Angular 中，两者都用于 DOM 操作。我目前正在单独使用 ElementRef 来编写 Angular 2 指令。如果我获得有关 Renderer 的更多信息，我可以在未来的指令中使用它。
【问题讨论】：
标签： angular angular2-directives elementref angular-renderer2 angular-renderer
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。这似乎有点不一致。有什么想法吗？
renderer 只是采用了ElementRef，但后来他们更改了它。我认为在Universal ElementRef.nativeElement 这样的平台上实际上并不指代DOM 元素。如果您检查angular.io/docs/ts/latest/api/core/index/ElementRef-class.html，您将看到nativeElement 的类型为any 而不是HTMLElement
nativeElement 可以引用特定于平台的元素，但是传递 elementRef 而不是 elementRef.nativeElement 仍然是一个更高的抽象，并且可以以任何方式工作
请注意，您应该避免使用 ElementHref，因为它被标记为存在安全风险。
Angular 2 文档：
“允许直接访问 DOM 会使您的应用程序更容易受到 XSS 攻击。请仔细检查代码中对 ElementRef 的任何使用。有关更多详细信息，请参阅安全指南。”
“当需要直接访问 DOM 时，使用此 API 作为最后的手段。改用 Angular 提供的模板和数据绑定。或者，您可以查看 Renderer，它提供的 API 即使在直接访问时也可以安全使用不支持原生元素。”
【讨论】：
ElementRef本身并没有什么坏处。罪魁祸首是ElementRef.nativeElement。如果用户提供的数据用于添加到 DOM，恕我直言（我只是安全专家）唯一相关的安全性，对吧？