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

如下所示：

//ponet.html

span>CSS

.child-span{

color:red;

}

如果現(xiàn)在，parent組件想要child組件中span的內(nèi)容變成綠色?？梢允褂萌缦碌姆绞?/p>

//ponent.scss

app-child{

::ng-deep{

.child-span{

color:green;

}

在parent組件中，使用angular提供的::ng-deep關(guān)鍵字進行樣式的覆蓋。

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

//ponet.html

div>

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

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

css選擇器

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

對于angular的樣式隔離的問題，比較重要的就是屬性選擇器。在屬性選擇器中，通過給元素添加任意一個屬性，可以準確地選中這個元素。比如說，

a[target]{

background-color:yellow;

}

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

另外一個是后代選擇器。

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

[attr]span{

color:green;

}

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

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

angular樣式隔離實現(xiàn)機制

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

//ponet.html

span>

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

//ponent.html

app-child/app-child

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

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

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

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

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

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

::ng-deep

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

//ponent.scss

app-child{

::ng-deep{

.child-span{

color:green;

}

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

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

//ponet.html

div>

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

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

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

:host{

app-child{

::ng-deep{

.child-div{

.child-span{

color:green;

}

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

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

:host

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

那這個:host有什么用呢？

常見的作用有兩個。

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

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

//ponent.scss

::ng-deep{

.random-class{

xxxx

}

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

.random-class{

xxxx

}

random-class將會對全局造成影響。

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

Applyingthe::ng-deeppseudo-classtoanyCSSrulecompletelydisablesview-encapsulationforthatrule.Anystylewith::ng-deepappliedbecomesaglobalstyle.Inordertoscopethespecifiedstyletothecurrentcomponentandallitsdescendants,besuretoincludethe:hostselectorbefore::ng-deep.Ifthe::ng-deepcombinatorisusedwithoutthe: