angular的样式隔离实现机制是什么
本篇内容主要讲解“angular的样式隔离实现机制是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“angular的样式隔离实现机制是什么”吧!
在贵德等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都做网站、网站制作 网站设计制作定制制作,公司网站建设,企业网站建设,品牌网站设计,成都全网营销,成都外贸网站建设,贵德网站建设费用合理。
angular 以组件为基本单位。我们编写一个一个的组件，再将这些组件组合为一颗组件树。但是在开发的过程中，经常需要在父组件中覆盖子组件的样式。比如现在我们有一个parent 组件和child 组件，child 组件里面有一个span，span 的字体为红色。
如下所示：
//child.componet.html
child 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
child span
//child.component.scss
.child-div {
.child-span {
color: red;
}
}
这时候，我们会发现child 组件中span 的内容又变回了红色，之前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 完全基于这两个内容。
angular 样式隔离实现机制
我们现在回到之前的angular组件
child 组件的内容为
//child.componet.html
child span
//child.component.scss
.child-span {
color: red;
}
parent 组件的内容为
//parent.component.html
上面两个组件经过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
那为什么通过::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
child span
到此，相信大家对“angular的样式隔离实现机制是什么”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
