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)

聯繫郵箱：[email protected]

本文作者：前端首席體驗師(CheongHu)

聯繫郵箱：[email protected]

閱讀更多 前端漫談 的文章

關鍵字: 組件 CSS 升級