如何在子 CSS 选择器中使用父组件的类答案

【问题标题】：How to use parent component's class in a child css selector如何在子 CSS 选择器中使用父组件的类
【发布时间】：2020-03-11 21:22:38
【问题描述】：

在一些 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;
}

并且选择器的父部分不再起作用。那么我怎样才能做到这一点呢？另外请记住，我简化了这个例子，两个组件不一定是一个接一个（中间可能有任意数量的组件）。

【问题讨论】：

将数据传递给子组件，让其管理自己的状态。
@zzzzBov 那将是我最后的选择。

标签： css angular

【解决方案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

【讨论】：