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树，因此其内部的样式达到了隔离效果。

　　注意：使用这个策略的组件被独立出去了，因此全局样式无法做用到组件内部。若是组件元素须要用到全局样式，千万别使用这种封装策略。