如何使用父組件的類在孩子CSS選擇

考慮以下層次結構在某些角度2/4項目：如何使用父組件的類在孩子CSS選擇

<parent-cmp [ngClass]="{ 'parent': condition }"> 
    <child-cmp class="child"></child-cmp> 
</parent-cmp>

現在在子組件的CSS文件，我想說：

.parent .child { 
    background-color: red; 
}

在這種情況下，我將孩子的設計基於父母的邏輯，而不知道子級別的邏輯是什麼。但問題是，這是行不通的。這是因爲，Angular將子CSS選擇器編譯爲：

.parent[_ngcontent-c9] .child[_ngcontent-c9] { 
    background-color: red; 
}

而選擇器的父部分不再工作。那麼我該如何解決這個問題？另外請記住，我簡化了這個例子，並且這兩個組件不一定是一個接一個的（中間可能有任意數量的組件）。

來源

2017-07-01 Mehran

數據傳遞到子組件爲它管理自己的狀態。 – zzzzBov

@zzzzBov這將是我最後的手段。 – Mehran

在Angular中，這被稱爲「視圖封裝」，JavaScript，CSS樣式和HTML模板全部由Angular管理。這種方法有很多優點，因爲它使您可以輕鬆地對項目進行樹形移動並刪除未使用的組件。您不僅可以刪除Javascript代碼，還可以刪除所有樣式和HTML。

當它打開時，樣式作爲嵌入樣式被注入到DOM中。 Angular會跟蹤文檔上需要的樣式，並根據需要添加或刪除樣式。這些樣式在運行時可能會有奇怪的名稱，就像您的問題中的名稱一樣。

您需要詳細閱讀https://angular.io/guide/component-styles款式指南，瞭解如何定義:host款式。這是視圖封裝打開時分配給組件的樣式。使用:host時，可以使用:host-context路徑引用父選擇器，並且還可以使用/deep/選擇器在其他子組件內部進行樣式設置。請注意。這全是可選的。它默認打開，但是如果你不想使用它。你可以把它關掉。

您可以在定義組件時更改視圖封裝模式。要禁用此功能，只需將encapsulation選項更改爲本地。

見指南：

https://angular.io/guide/component-styles#view-encapsulation

來源

2017-07-01 03:00:38 cgTag

如何使用父組件的類在孩子CSS選擇

回答

相關問題