Angular2有三種樣式封裝方式,分別是None、Native、Emulated。less
可用元數據「encapsulation」配置,配置方式以下:spa
三者有什麼區別呢?文檔
None:iframe
使用None策略,組件配置的樣式沒作任何封裝;它會直接在文檔樹種插入<style>標籤,這個樣式全局有效。io
Emulated:class
使用Emulated策略,組件配置的樣式只在該組件的元素上生效(不包括宿主元素);它是給每一個樣式名加入一個程序自動生成的屬性,同時該組件全部的元素也會被添加該樣式,組件以外的元素沒有這個屬性,從而達到隔離效果。配置
注意:這個策略的樣式只做用在該組件的元素上,外部組件以及子組件沒有對應隔離屬性,因此樣式不會做用到外部組件和子組件上。程序
Native:技術
使用Native策略,Angular2會使用"shadow DOM"技術對組件全部元素進行隔離(相似iframe的分離效果)。元素被獨立出正常的DOM樹,因此其內部的樣式達到了隔離效果。數據
注意:使用這個策略的組件被獨立出去了,因此全局樣式無法做用到組件內部。若是組件元素須要用到全局樣式,千萬別使用這種封裝策略。