angular 2 中 Renderer 和 ElementRef 的区别
Difference between Renderer and ElementRef in angular 2
Renderer
和 ElementRef
有什么区别?在 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
是对模板或子项中匹配元素的引用。
Renderer
和 ElementRef
不是 "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."
Renderer
和 ElementRef
有什么区别?在 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
是对模板或子项中匹配元素的引用。
Renderer
和 ElementRef
不是 "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."