angular怎么進(jìn)行樣式隔離？實(shí)現(xiàn)機(jī)制詳解

angular怎么進(jìn)行樣式隔離？下面本篇文章就來(lái)帶大家了解一下angular的樣式隔離實(shí)現(xiàn)機(jī)制，希望對(duì)大家有所幫助！

angular 以組件為基本單位。我們編寫一個(gè)一個(gè)的組件，再將這些組件組合為一顆組件樹。但是在開發(fā)的過(guò)程中，經(jīng)常需要在父組件中覆蓋子組件的樣式。比如現(xiàn)在我們有一個(gè)parent 組件和child 組件，child 組件里面有一個(gè)span，span 的字體為紅色。

如下所示：

//child.componet.html <span class="child-span">child span</span> //child.component.scss .child-span {   color: red; }

如果現(xiàn)在，parent 組件想要child 組件中span 的內(nèi)容變成綠色。可以使用如下的方式

//parent.component.scss app-child {   ::ng-deep {     .child-span {       color: green;     }   } }

在parent 組件中，使用angular 提供的::ng-deep 關(guān)鍵字進(jìn)行樣式的覆蓋。【相關(guān)教程推薦：《angular教程》】

現(xiàn)在我們修改一下child 組件的內(nèi)容，在span 外面加上一層div，畢竟現(xiàn)實(shí)中的組件肯定不會(huì)只有一層這么簡(jiǎn)單。

//child.componet.html <div class="child-div">   <span class="child-span">child span</span> </div> //child.component.scss .child-div {   .child-span {     color: red;   } }

這時(shí)候，我們會(huì)發(fā)現(xiàn)child 組件中span 的內(nèi)容又變回了紅色，之前parent 組件對(duì)其的覆蓋并沒(méi)有生效。

::ng-deep 為什么會(huì)失效呢？或者說(shuō)，::ng-deep 會(huì)在什么時(shí)候有效？什么時(shí)候失效？更進(jìn)一步說(shuō)，angular 中組件和組件之間的樣式隔離是怎么做到的呢？

css 選擇器

css 中提供了元素選擇器，id 選擇器，class 選擇器以及屬性選擇器。

對(duì)于angular 的樣式隔離的問(wèn)題，比較重要的就是屬性選擇器。 在屬性選擇器中，通過(guò)給元素添加任意一個(gè)屬性，可以準(zhǔn)確地選中這個(gè)元素。 比如說(shuō)，

a[target] {     background-color:yellow; }

通過(guò)上面的選擇器，我們可以選中所有帶有target屬性的a元素。

另外一個(gè)是后代選擇器。

在css 中，后代選擇器會(huì)選擇指定元素的所有后代元素。 比如，

[attr] span {     color: green; }

這個(gè)選擇器會(huì)首先選中帶有attr 屬性的元素，然后選中這個(gè)元素的所有后代span 元素。

有了css 屬性選擇器和后代選擇器，就有了需要完成組件樣式隔離的所有工具。angular 中組件的樣式隔離與::ng-deep 完全基于這兩個(gè)內(nèi)容。

angular 樣式隔離實(shí)現(xiàn)機(jī)制

我們現(xiàn)在回到之前的angular組件 child 組件的內(nèi)容為

//child.componet.html <span class="child-span">child span</span> //child.component.scss .child-span {   color: red; }

parent 組件的內(nèi)容為

//parent.component.html <app-child></app-child>

上面兩個(gè)組件經(jīng)過(guò)angular 處理以后，生成的html 內(nèi)容如下

可以看到，parent 組件上面多了_ngcontent-mye-c13 和_nghost-mye-c12 兩個(gè)屬性，而child 組件上面多了_ngcontent-mye-c12 和_nghost-mye-c11 兩個(gè)屬性，child 組件下的span 標(biāo)簽，增加了_nghost-mye-c11 屬性。

對(duì)于scss 文件，經(jīng)過(guò)angular 的處理以后，在child 組件中的.child-span 類，變成了.child-span[_nghost-mye-c11]。

通過(guò)這些內(nèi)容我們就可以看出來(lái)angular 的樣式隔離就是利用屬性選擇器完成的。

_nghost-mye-c11 這個(gè)屬性只會(huì)出現(xiàn)在child 組件中。在child.component.scss 中的.child-span類變成了.child-span[_nghost-mye-c11]，根據(jù)之前提到的屬性選擇器的機(jī)制，.child-span 只會(huì)對(duì)child 組件的內(nèi)容生效。

如果在parent 組件內(nèi)部也寫一個(gè).child-span類選擇器，那么生成的類選擇器就會(huì)是.child-span[_nghost-mye-c12]。而_nghost-mye-c12 這個(gè)屬性是屬于parent 組件的，于是這個(gè).child-span 類只會(huì)對(duì)parent 組件的內(nèi)容生效。并不會(huì)影響到child 組件，樣式的隔離也就完成了。

::ng-deep

那為什么通過(guò)::ng-deep 可以在parent 組件里面，覆蓋child 組件中的內(nèi)容呢？

//parent.component.scss app-child {   ::ng-deep {     .child-span {       color: green;     }   } }

上面的內(nèi)容通過(guò)angular 處理以后，生成的內(nèi)容為app-child[_nghost-mye-c12] .child_span。位于::ng-deep 后面的類，去掉了自動(dòng)添加的屬性，這時(shí)候根據(jù)css 的后代選擇器機(jī)制。app-child[_nghost-mye-c12] .child_span會(huì)選中child 組件下面的所有帶有.child_span 類的標(biāo)簽，而且根據(jù)優(yōu)先級(jí)計(jì)算，app-child[_nghost-mye-c12] .child_span 高于child 組件生成的.child_span[_nghost-mye-c11] ，于是child 組件中的樣式就被覆蓋掉了。

那為什么有時(shí)候::ng-deep不能夠覆蓋掉呢？比如，當(dāng)child 組件代碼如下的時(shí)候

//child.componet.html <div class="child-div">   <span class="child-span">child span</span> </div> //child.component.scss .child-div {   .child-span {     color: red;   } }

這時(shí)候即使我們發(fā)現(xiàn)child 組件中span 的顏色依舊是紅色。

實(shí)際上原因也不復(fù)雜，檢查angular 生成的樣式文件后，我們可以發(fā)現(xiàn)，之所以沒(méi)有把覆蓋掉，純粹是因?yàn)閏ss 選擇器優(yōu)先級(jí)的問(wèn)題。child 組件生成的樣式.child-div[_nghost-mye-c11] .child-span[_nghost-mye-c11] 優(yōu)先級(jí)高于parent 組件生成的樣式app-child[_nghost-mye-c12] .child。于是，我們看到的效果就是parent 組件中的::ng-deep 沒(méi)有生效，一種比較快捷的做法是直接在parent 組件的樣式后面加上!important。但是由于!important 權(quán)重太高的原因，并不是很推薦。歪個(gè)樓，在發(fā)現(xiàn)angular ::ng-deep 失效的原因之前，很遺憾，項(xiàng)目之前很多地方的都有這種用法。

另一個(gè)方法就是，既然是因?yàn)閮?yōu)先級(jí)不夠，那么提高parent 組件生成的樣式的優(yōu)先級(jí)就可以了。 修改parent 組件的代碼為

:host {   app-child {     ::ng-deep {       .child-div {         .child-span {           color: green;         }       }     }   } }

這時(shí)候，parent 組件生成的樣式[_nghost-mye-c12] app-child[_nghost-mye-c12] .child-div .child-span 優(yōu)先級(jí)高于child 組件生成的樣式.child-div[_nghost-mye-c11] .child-span[_nghost-mye-c11] ，child 組件中span 的顏色也就變綠了。

這里我們使用了:host 關(guān)鍵字，接下來(lái)，我們簡(jiǎn)單看看它的作用。

:host

上個(gè)小結(jié)中，parent 組件生成的樣式是[_nghost-mye-c12] app-child[_nghost-mye-c12] .child-div .child-span，如果去掉:host，就會(huì)發(fā)現(xiàn)，生成的樣式變成了app-child[_nghost-mye-c12] .child-div .child-span。所以:host 關(guān)鍵字只是給生成的樣式，加上了parent 組件屬性字段而已。

那這個(gè):host有什么用呢？

常見的作用有兩個(gè)。

一個(gè)就是選擇當(dāng)前的組件標(biāo)簽，在angular 中，我們自定義的組件，比如這里的parent 組件app-parent 和child 組件app-child 最后都是會(huì)渲染到生成的html 文檔上的。如果需要選中這些標(biāo)簽，就可以使用:host 關(guān)鍵字。

另一個(gè)作用還是隔離樣式，將class 類寫在:host 內(nèi)部，這個(gè)類無(wú)論如何也是不可能泄漏到全局去的。實(shí)際上，通過(guò)前面的內(nèi)容分析可以發(fā)現(xiàn)，不寫在:host 里面，也不會(huì)泄漏到全局。但是如果出現(xiàn)了以下的情況

//some.component.scss ::ng-deep {     .random-class {         xxxx     } }

這個(gè)類經(jīng)過(guò)angular 處理以后，最后會(huì)變?yōu)?/p>

.random-class {     xxxx }

random-class 將會(huì)對(duì)全局造成影響。

但是如果把它包裹在:host 內(nèi)部，哪怕使用了::ng-deep 關(guān)鍵字，最多也只會(huì)影響到這個(gè)組件的后代元素。 所以在angular 官方文檔中有下面的一段話。

Applying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule. Any style with ::ng-deep applied becomes a global style. In order to scope the specified style to the current component and all its descendants, be sure to include the :host selector before ::ng-deep. If the ::ng-deep combinator is used without the :host pseudo-class selector, the style can bleed into other components.

總結(jié)

我們首先介紹了css 的屬性選擇器和后代選擇器。通過(guò)分析angular 生成的html 和css 代碼，發(fā)現(xiàn)angular 的樣式隔離功能，完全是基于這兩個(gè)內(nèi)容實(shí)現(xiàn)的。接下來(lái)，分析了::ng-deep 有時(shí)候生效，有時(shí)候有不生效的原因。最后介紹了使用:host 關(guān)鍵字來(lái)完全避免樣式泄漏到全局。