填坑指南-Angular1升級到Angular8之組件樣式封裝

背景

angular1升級Angular8須要瞭解的改變，請移步傳送門。 angular8核心思想：模塊化，各組件維護本身的樣式。

樣式升級

angular1代碼

//以前代碼scss, 圖便利，常寫在父組件的scss文件中,
.parent-container{
 .demo-container {
	 .items{
	    .....
	  }
 }
}	
複製代碼

angular1編譯後

.parent-container{
 ....
}
.parent-container .demo-container{
 ....
}
.parent-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樣式封裝

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

聯繫郵箱：simple2012hcz@126.com