Angular2-三种样式封装策略的区别

标签：全局   str   组件   ati   shadow   隔离   生成   自动生成   文档   

　　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-三种样式封装策略的区别

标签：全局   str   组件   ati   shadow   隔离   生成   自动生成   文档   

原文地址：http://www.cnblogs.com/longhx/p/6947632.html