关于Angular样式封装

引导

这是一个很简单的话题，可是你很难在搜索到一篇比较完整的介绍它的文章，或者说单纯的告诉你 ViewEncapsulation 的用法而已，这在实际项目中远远不够的。

1、封装模式

分别为：

• Native 原先浏览器Shadow DOM行为。

• Emulated 仿真模式，经过Angular来模拟相似Shadow DOM的行为。

• None 无任何封装行为。

以上三种模式惟一的区别在于Shadow DOM，固然其做用是让组件的样式只进不出，换言之即组件内的样式不会影响到外部组件。有关于Shadow DOM更多的细节不在这里讨论。

三者的表现形式

假定使用如下代码：

@Component({
  template: `<h1>test</h1>`,
  styles: [`h1 { color: #f50; }`],
  encapsulation: ViewEncapsulation.Native
})

在不一样模式下产生的HTML&CSS风格都不尽相同，了解这些不同尤其重要。它们分别为：

Native:

#shadow-root (open)
    <style>h1 { color: #f50; }</style>
    <h1>test</h1>

Emulated:

<style>h1[_ngcontent-c0] { color: #f50; }</style>
<h1 _ngcontent-c0>test</h1>

None:

<style>h1 { color: #f50; }</style>
<h1>test</h1>

Native & None 在内容是同样的，但其后者会影响至其余外部组件的 h1 元素。

2、组件样式

组件样式的封装模式取决于咱们对 encapsulation 的配置，例如上面的示例。固然你能够了在 main.ts 时为全部组件统一设定一种行的模式，例如：

platformBrowserDynamic().bootstrapModule(AppModule, {
  defaultEncapsulation: ViewEncapsulation.None
})

虽然三种模式都有不一样的风格，但对于一个组件而言，若是没有一很合理的使用风格在实际项目中会让咱们很头疼，特别是当项目中使用第三方组件库（例如：ngx-bootstrap、ng-zorro-antd、material2 等）时，有时很容易受组件库的影响抑或须要让组件库与业务组件样式作一些微调时，了解一些细节很是重要。

例如一个用于渲染页面标头名曰：app-header 组件，其中 <nz-breadcrumb> 面包屑 默认状况下它会对最后一项进行加粗，但假设这不是咱们但愿的，而应该是一个不加粗和其余项同样的文本：

<nz-breadcrumb>
  <nz-breadcrumb-item>Home</nz-breadcrumb-item>
  <nz-breadcrumb-item>Detail</nz-breadcrumb-item>
</nz-breadcrumb>

最终生成的HTML是这样子：

<nz-breadcrumb _ngcontent-c1="" class="ant-breadcrumb">
    <nz-breadcrumb-item _ngcontent-c1="">
    <span class="ant-breadcrumb-link">
      Home
    </span>
    <span class="ant-breadcrumb-separator">/</span></nz-breadcrumb-item>
    <nz-breadcrumb-item _ngcontent-c1="">
    <span class="ant-breadcrumb-link">
      Detail
    </span>
    <span class="ant-breadcrumb-separator">/</span></nz-breadcrumb-item>
  </nz-breadcrumb>

假若你不假思索的在 app-header 组件的 styles 属性中加上：

.ant-breadcrumb-link {
    font-weight: normal;
}

正如你指望的那样，可能不必定会有你想要的结果，亦或的结果可能会存在隐患。前面我说过三种模式惟一的区别在于Shadow DOM，所以说白了是两种不一样的结果。

若组件设定为 None 模式，而会生效，但只要 app-header 组件出现过一次在将来全部即便再也不使用 app-header 组件的状况下全部的面包屑的最后一项都是是不加粗的，这即是我说的隐患。

反之，对于 Shadow 行为，它会为 nz-breadcrumb 建立一个额外的属性 _ngcontent-c1 来标识（不论是 Native、Emulated 本质是同样的）所设定的样式仅限于 app-header 组件当中。而 Angular 中即采用 :host 来表示组件自身，因此前面的CSS样式应该变成这样：

:host .ant-breadcrumb-link {
    font-weight: normal;
}

最后生成的样式会变成这样：

[_nghost-c1] .ant-breadcrumb-link[_ngcontent-c1] {
  font-weight: normal;
}

我认为咱们没有必要去理解生成的标识符是怎么样，只须要知道 :host 表示组件自身。

然而咱们会发现，对于第三方组件 nz-breadcrumb 组件而言，.ant-breadcrumb-link 是其组件内部某个HTML元素的 class 而已，且它有本身的一套组件封装规则。但咱们生成的CSS中包括了一个奇怪的字符 [_ngcontent-c1]，最终致使 app-header 组件样式没法改变第三方组件 nz-breadcrumb 组件内容的样式。

这是很合理的，个人领地不可侵犯，Angular 组件自己便是 Web Component 标准的具体实现。

难道咱们没有办法侵犯第三方组件了吗？好在 Angular 提供了一种对将来工具更好兼容性的命令 ::ng-deep 来强制样式容许侵入子组件。

:host ::ng-deep .ant-breadcrumb-link {
  font-weight: normal;
}

生成的CSS会是这样:

[_nghost-c1] .ant-breadcrumb-link {
  font-weight: normal;
}

最终这个不加粗的效果只会在 app-header 组件内部有效。

总结

熟悉 :host、::ng-deep 组合用法对组件样式的构建很关键，Angular 组件有本身的业务逻辑、样式、HTML模板它们是构建一个 Web Component 的基础技术核心。

但愿此篇能帮助你们更好理解组件样式。

Happy coding!