Angular的样式隔离实现机制是怎样的？

本文共计2526个文字，预计阅读时间需要11分钟。

Angular如何实现样式隔离？

本文将和大家一起探讨Angular的样式隔离实现机制，希望对大家有所帮助！

Angular以组件为基本单位。我们编写一个组件，再将这些组件组合起来。

Angular是怎么进行样式隔离的？下面本篇文章就来和大家一起聊聊angular的样式隔离实现机制，希望对大家有所帮助！

angular 以组件为基本单位。我们编写一个一个的组件，再将这些组件组合为一颗组件树。但是在开发的过程中，经常需要在父组件中覆盖子组件的样式。比如现在我们有一个parent 组件和child 组件，child 组件里面有一个span，span 的字体为红色。

如下所示：

//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，毕竟现实中的组件肯定不会只有一层这么简单。