关于Angular样式封装

huangjinnan 发布于2019-08-29 13:50 / 2761人阅读

摘要：一封装模式分别为原先浏览器行为。无任何封装行为。以上三种模式唯一的区别在于，当然其作用是让组件的样式只进不出，换言之即组件内的样式不会影响到外部组件。二组件样式组件样式的封装模式取决于我们对的配置，例如上面的示例。

引导

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

一、封装模式

分别为：

Native 原先浏览器Shadow DOM行为。

Emulated 仿真模式，通过Angular来模拟类似Shadow DOM的行为。

None 无任何封装行为。

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

三者的表现形式

假定使用以下代码：

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

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

Native:

#shadow-root (open)
    
    test

Emulated:


test

None:


test

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

二、组件样式

组件样式的封装模式取决于我们对 encapsulation 的配置，例如上面的示例。当然你可以了在 main.ts 时为所有组件统一设定一种行的模式，例如：

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

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

例如一个用于渲染页面标头名曰：app-header 组件，其中面包屑默认情况下它会对最后一项进行加粗，但假设这不是我们希望的，而应该是一个不加粗和其他项一样的文本：


  Home
  Detail

最终生成的HTML是这样子：

倘若你不假思索的在 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!

云服务器 GPU云服务器关于样式的 Angular cdn angular angular cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112743.html

Angular2 控制视图的封装模式

摘要：如果你运用好视图的封装模式，会帮你解决好很多的问题。通过在组件的元数据上设置视图封装模式，你可以分别控制每个组件的封装模式。 Angular2 控制视图的封装模式为什么我想要分享控制视图的封装模式呢？主要是我们angular的项目大多数都会去引入一个UI组件，但往往因为需求和关系我们会去修改UI组件的样式。这时，因为有些人不是很了解View encapsulation里面的属性，往往...

keke 2019-08-30 15:55 评论0 收藏0
webpack+es6+angular1.x项目构建

摘要：技术栈概述大名，顾名思义是在年月正式发布的一套标准。小名，意为第六次变更。本项目，选择的是的推荐配置，唯一注意的是全局变量中把的关键词加上。项目结构公共组件目录，放一些二次封装的等等片段式的。项目的公用样式目录。技术栈概述 ES2015(ES6) 大名ES2015，顾名思义是 ECMAScript 在2015年6月正式发布的一套标准。小名ES6，意为ECMAScript第六次变更。（...

KoreyLee 2019-08-20 16:12 评论0 收藏0
Angular 2.x 从0到1 (一）史上最简单的Angular2教程

摘要：官方支持微软出品，是的超集，是的强类型版本作为首选编程语言，使得开发脚本语言的一些问题可以更早更方便的找到。第一个组件那么我们来为我们的增加一个吧，在命令行窗口输入。引导过程通过在中引导来启动应用。它们的核心就是。第一节：Angular 2.0 从0到1 （一）第二节：Angular 2.0 从0到1 （二）第三节：Angular 2.0 从0到1 （三）第一章：认识Angular...

tuniutech 2019-08-20 13:58 评论0 收藏0