首页 > 代码库 > Angular2-三种样式封装策略的区别
Angular2-三种样式封装策略的区别
Angular2有三种样式封装方式,分别是None、Native、Emulated。
可用元数据“encapsulation”配置,配置方式如下:
- encapsulation: ViewEncapsulation.None
- encapsulation: ViewEncapsulation.Emulated
- encapsulation: ViewEncapsulation.Native
三者有什么区别呢?
None:
使用None策略,组件配置的样式没做任何封装;它会直接在文档树种插入<style>标签,这个样式全局有效。
Emulated:
使用Emulated策略,组件配置的样式只在该组件的元素上生效(不包括宿主元素);它是给每个样式名加入一个程序自动生成的属性,同时该组件所有的元素也会被添加该样式,组件之外的元素没有这个属性,从而达到隔离效果。
注意:这个策略的样式只作用在该组件的元素上,外部组件以及子组件没有对应隔离属性,所以样式不会作用到外部组件和子组件上。
Native:
使用Native策略,Angular2会使用"shadow DOM"技术对组件所有元素进行隔离(类似iframe的分离效果)。元素被独立出正常的DOM树,所以其内部的样式达到了隔离效果。
注意:使用这个策略的组件被独立出去了,所以全局样式没法作用到组件内部。如果组件元素需要用到全局样式,千万别使用这种封装策略。
Angular2-三种样式封装策略的区别
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。