17

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

4

2 回答 2

38

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

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

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

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

Renderer并且ElementRef不是“这个或那个”,而是必须一起使用它们才能获得完整的平台抽象。

Renderer作用于 DOM 并且ElementRef是对作用于 DOM 中的元素的引用Renderer

于 2016-09-30T06:39:26.597 回答
6

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

Angular 2 文档:

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

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

于 2016-09-30T07:17:47.777 回答