背景
angular1升级Angular8需要了解的改变,请移步传送门。
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 {
...
}
参考文献
本文作者:前端首席体验师(CheongHu)