Angular1升级到Angular2之组件样式封装

背景

angular1升级Angular8需要了解的改变，请移步https://juejin.im/post/5dad7c28518825554239ab77。angular8核心思想：模块化，各组件维护自己的样式。

样式升级

angular1代码

 //之前代码scss, 图便利，常写在父组件的scss文件中,
.parent-container{
 .demo-container {
 .items{
 .....
 }
 }
} 

angular1编译后

.parent-container{
 ....
}
.demo-container{
 ....
}
.demo-container .items{
 ....
}

angular8样式封装

• ShadowDom ： 组件的宿主元素附加一个 Shadow Dom，进行样式标识。支持度有限。
• None： 不进行样式封装，暴露为全局样式。
• Native：已废弃。
• Emulated ： 模式（默认值），css样式重命名，进而唯一标识。此时，针对js动态添加的元素，需要使用:host, ::ng-deep 保持层级关系。

angular8样式需要拆分

各组件维护自己的样式 选择器要对应html

.parent-container{
 ...
}

// child 组件scss文件定义
 .demo-container{
 .items{
 ....
 }
 }

angular8动态元素样式不生效

.demo-container{
 .items{
 ....
 }
 }

//采用默认Emulated模式，此时动态添加的元素，样式会不生效。编译后如下
[_nghost-kjf-c2] .demo-container[_ngcontent-kjf-c2]{
 ....
}
[_nghost-kjf-c2] .demo-container[_ngcontent-kjf-c2] .items[_ngcontent-kjf-c2] {
 ....
}

angular8动态元素样式生效

:host ::ng-deep .demo-container{
 .items{
 ....
 }
 }

//添加:host ::ng-deep，不因为重命名影响层级关系，编译如下
[_nghost-svo-c2] .demo-container{
 ....
}
[_nghost-svo-c2] .demo-container .items {
 ...
}

参考文献

angular.cn/guide/component-styles#deprecated-deep--and-ng-deep

本文作者：前端首席体验师(CheongHu)

联系邮箱：simple2012hcz@126.com

本文作者：前端首席体验师(CheongHu)

联系邮箱：simple2012hcz@126.com