如何在子 css 選擇器中使用父組件的類

Question

考慮一些 Angular 2/4 項目中的以下層次結構：

<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;
}

選擇器的父部分將不再起作用。 那么我怎樣才能做到這一點呢？ 另外請記住，我簡化了這個例子，兩個組件不一定一個接一個（中間可能有任意數量的組件）。

Answer 1

在 Angular 中，這稱為“視圖封裝”，其中 JavaScript、CSS 樣式和 HTML 模板都由 Angular 管理。 這種方法有很多優點，因為它允許您輕松地搖動項目並刪除未使用的組件。 您不僅可以刪除 Javascript 代碼，還可以刪除所有樣式和 HTML。

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

您需要閱讀https://angular.io/guide/component-styles樣式指南以了解如何定義:host樣式。 這是打開視圖封裝時分配給組件的樣式。 使用:host您可以使用:host-context路徑引用父選擇器，也可以使用::ng-deep選擇器在其他子組件中設置樣式。

請記住。 這都是可選的。 默認情況下它是打開的，但如果您不想使用它。 你可以關掉它。

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

請參閱指南：

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