Angular是如何开展款式隔离?

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 选择符

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
<span class="child-span">child span</span>
//child.component.scss
.child-span {
  color: red;
}

parent 元件的内容是

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

上边2个部件通过angular 解决之后，产生的html 内容如下

能够看见，parent 部件上边得多_ngcontent-mye-c13 和_nghost-mye-c12 2个特性，而child 部件上边得多_ngcontent-mye-c12 和_nghost-mye-c11 2个特性，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
<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 关键词，下面，大家简易看一下它的功能。

: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 最后都是会3D渲染到产生的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的样式防护完成制度的具体内容，大量欢迎关注AdminJS其他类似文章！