Angular是怎麼進行樣式隔離的?以下這篇文章就來和大家一起聊聊angular的樣式隔離實作機制,希望對大家有幫助!
angular 以元件為基本單位。我們編寫一個一個的元件,再將這些元件組合為一顆組件樹。但是在開發的過程中,經常需要在父元件中覆蓋子元件的樣式。例如現在我們有一個parent 組件和child 組件,child 組件裡面有一個span,span 的字體是紅色。 【相關教學推薦:《angular教學》】
如下:
//child.componet.html <span class="child-span">child span</span> //child.component.scss .child-span { color: red; }
如果現在,parent 元件想要child 元件中span 的內容變成綠色。可以使用以下的方式
//parent.component.scss app-child { ::ng-deep { .child-span { color: green; } } }
在parent 元件中,使用angular 提供的::ng-deep
關鍵字進行樣式的覆寫。
現在我們修改一下child 元件的內容,在span 外面加上一層div,畢竟現實中的元件肯定不會只有一層這麼簡單。
//child.componet.html <div class="child-div"> <span class="child-span">child span</span> </div> //child.component.scss .child-div { .child-span { color: red; } }
這時候,我們會發現child 元件中span 的內容又變回了紅色,之前parent 元件對其的覆蓋並沒有生效。
::ng-deep
為什麼會失效呢?或者說,::ng-deep
會在什麼時候有效?什麼時候失效?更進一步說,angular 中元件和元件之間的樣式隔離是怎麼做到的呢?
css 中提供了元素選擇器,id 選擇器,class 選擇器以及屬性選擇器。
對於angular 的樣式隔離的問題,比較重要的就是屬性選擇器。 在屬性選擇器中,透過為元素添加任意一個屬性,可以準確地選取這個元素。 比如說,
a[target] { background-color:yellow; }
透過上面的選擇器,我們可以選取所有帶有target屬性的a元素。
另外一個是後代選擇器。
在css 中,後位選擇器會選擇指定元素的所有後代元素。 例如,
[attr] span { color: green; }
這個選擇器會先選取帶有attr 屬性的元素,然後選取這個元素的所有後代span 元素。
有了css 屬性選擇器和後位選擇器,就有了所有需要完成元件樣式隔離的工具。 angular 中元件的樣式隔離與::ng-deep
完全基於這兩個內容。
我們現在回到之前的angular元件 child 元件的內容為
//child.componet.html <span class="child-span">child span</span> //child.component.scss .child-span { color: red; }
parent 元件的內容為
//parent.component.html <app-child></app-child>
上面兩個元件經過angular 處理以後,產生的html 內容如下
可以看到,parent 元件上面多了_ngcontent-mye-c13
和_nghost-mye-c12
兩個屬性,而child 元件上面多了_ngcontent- mye-c12
和_nghost-mye-c11
兩個屬性,child 元件下的span 標籤,增加了_nghost-mye-c11
屬性。
對於scss 文件,經過angular 的處理以後,在child 元件中的.child-span
類,變成了.child-span[_nghost-mye-c11]
。
透過這些內容我們就可以看出來angular 的樣式隔離就是利用屬性選擇器完成的。
_nghost-mye-c11
這個屬性只會出現在child 元件中。在child.component.scss 中的.child-span
類別變成了.child-span[_nghost-mye-c11]
,根據先前提到的屬性選擇器的機制,.child-span
只會對child 元件的內容生效。
如果在parent 元件內部也寫一個.child-span
類別選擇器,那麼產生的類別選擇器就會是.child-span[_nghost-mye-c12 ]
。而_nghost-mye-c12
這個屬性是屬於parent 元件的,所以這個.child-span
類別只會對parent 元件的內容生效。並不會影響到child 元件,樣式的隔離也就完成了。
那為什麼透過::ng-deep
可以在parent 元件裡面,覆蓋child 元件中的內容呢?
//parent.component.scss app-child { ::ng-deep { .child-span { color: green; } } }
上面的内容通过angular 处理以后,生成的内容为app-child[_nghost-mye-c12] .child_span
。位于::ng-deep
后面的类,去掉了自动添加的属性,这时候根据css 的后代选择器机制。app-child[_nghost-mye-c12] .child_span
会选中child 组件下面的所有带有.child_span
类的标签,而且根据优先级计算,app-child[_nghost-mye-c12] .child_span
高于child 组件生成的.child_span[_nghost-mye-c11]
,于是child 组件中的样式就被覆盖掉了。
那为什么有时候::ng-deep
不能够覆盖掉呢?比如,当child 组件代码如下的时候
//child.componet.html <div class="child-div"> <span class="child-span">child span</span> </div> //child.component.scss .child-div { .child-span { color: red; } }
这时候即使我们发现child 组件中span 的颜色依旧是红色。
实际上原因也不复杂,检查angular 生成的样式文件后,我们可以发现,之所以没有把覆盖掉,纯粹是因为css 选择器优先级的问题。child 组件生成的样式.child-div[_nghost-mye-c11] .child-span[_nghost-mye-c11]
优先级高于parent 组件生成的样式app-child[_nghost-mye-c12] .child
。于是,我们看到的效果就是parent 组件中的::ng-deep
没有生效,一种比较快捷的做法是直接在parent 组件的样式后面加上!important
。但是由于!important
权重太高的原因,并不是很推荐。歪个楼,在发现angular ::ng-deep
失效的原因之前,很遗憾,项目之前很多地方的都有这种用法。
另一个方法就是,既然是因为优先级不够,那么提高parent 组件生成的样式的优先级就可以了。 修改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
优先级高于child 组件生成的样式.child-div[_nghost-mye-c11] .child-span[_nghost-mye-c11]
,child 组件中span 的颜色也就变绿了。
这里我们使用了:host
关键字,接下来,我们简单看看它的作用。
上个小结中,parent 组件生成的样式是[_nghost-mye-c12] app-child[_nghost-mye-c12] .child-div .child-span
,如果去掉:host
,就会发现,生成的样式变成了app-child[_nghost-mye-c12] .child-div .child-span
。所以:host
关键字只是给生成的样式,加上了parent 组件属性字段而已。
那这个:host
有什么用呢?
常见的作用有两个。
一个就是选择当前的组件标签,在angular 中,我们自定义的组件,比如这里的parent 组件app-parent
和child 组件app-child
最后都是会渲染到生成的html 文档上的。如果需要选中这些标签,就可以使用:host
关键字。
另一个作用还是隔离样式,将class 类写在:host
内部,这个类无论如何也是不可能泄漏到全局去的。实际上,通过前面的内容分析可以发现,不写在:host
里面,也不会泄漏到全局。但是如果出现了以下的情况
//some.component.scss ::ng-deep { .random-class { xxxx } }
这个类经过angular 处理以后,最后会变为
.random-class { xxxx }
random-class
将会对全局造成影响。
但是如果把它包裹在:host
内部,哪怕使用了::ng-deep
关键字,最多也只会影响到这个组件的后代元素。
所以在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.
我们首先介绍了css 的属性选择器和后代选择器。通过分析angular 生成的html 和css 代码,发现angular 的样式隔离功能,完全是基于这两个内容实现的。接下来,分析了::ng-deep
有时候生效,有时候有不生效的原因。最后介绍了使用:host
关键字来完全避免样式泄漏到全局。
更多编程相关知识,请访问:编程视频!!
以上是一起聊聊angular的樣式隔離實作機制的詳細內容。更多資訊請關注PHP中文網其他相關文章!