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樹，因此其內部的樣式達到了隔離效果。

　　注意：使用這個策略的組件被獨立出去了，因此全局樣式無法做用到組件內部。若是組件元素須要用到全局樣式，千萬別使用這種封裝策略。