angular 2 中 Renderer 和 ElementRef 的区别

Difference between Renderer and ElementRef in angular 2

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

Renderer 是 class,它是对 DOM 的部分抽象。 使用 Renderer 来操纵 DOM 不会破坏服务器端渲染或 Web Worker(直接访问 DOM 会破坏)。

ElementRef 是一个 class 可以保存对 DOM 元素的引用。 这又是一种抽象,不会在浏览器 DOM 实际上不可用的环境中中断。

如果ElementRef被注入一个组件,注入的实例是对当前组件宿主元素的引用。

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

RendererElementRef 不是 "either this or that",而是它们必须一起使用才能获得完整的平台抽象。

Renderer 作用于 DOM,ElementRef 是对 DOM 中元素的引用,Renderer 作用于该元素。

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

Angular 2 文档:

"Permitting direct access to the DOM can make your application more vulnerable to XSS attacks. Carefully review any use of ElementRef in your code. For more detail, see the Security Guide."

"Use this API as the last resort when direct access to DOM is needed. Use templating and data-binding provided by Angular instead. Alternatively you take a look at Renderer which provides API that can safely be used even when direct access to native elements is not supported."