引导

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

一、封装模式

分别为：

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 元素。

二、组件样式

组件样式的封装模式取决于我们对 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!

关于Angular样式封装

引导

一、封装模式

二、组件样式

总结

猜你在找的Angularjs相关文章