考虑一些 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;
}
选择器的父部分将不再起作用。那么我怎样才能做到这一点呢？另外请记住，我简化了这个例子，两个组件不一定是一个接一个(中间可能有任意数量的组件)。
最佳答案
在 Angular 中，这称为“ View 封装”，其中 JavaScript、CSS 样式和 HTML 模板都由 Angular 管理。这种方法有很多优点，因为它允许您轻松地对元素进行 tree-shaking 并删除未使用的组件。您不仅可以删除 Javascript 代码，还可以删除所有样式和 HTML。
当它打开时，样式会作为嵌入样式注入(inject)到 DOM 中。 Angular 会跟踪文档需要哪些样式，并根据需要添加或删除样式。这些样式在运行时可能有奇怪的名称，就像您问题中的名称一样。
您需要阅读 https://angular.io/guide/component-styles样式指南，了解如何定义 :host 样式。这是打开 View 封装时分配给组件的样式。使用 :host 时，您可以使用 :host-context 路径引用父选择器，还可以使用 ::ng 在其他子组件中设置样式-深选择器。
记住。这都是可选的。默认情况下它是打开的，但如果你不想使用它。您可以将其关闭。
您可以在定义组件时更改 View 封装模式。要禁用此功能，只需将 encapsulation 选项更改为 native。
查看指南:
https://angular.io/guide/component-styles#view-encapsulation
关于css - 如何在子 css 选择器中使用父组件的类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44856667/