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中，这被称为＆＃34; view encapsulation＆＃34;其中JavaScript，CSS样式和HTML模板都由Angular管理。这种方法有很多优点，因为它允许您轻松地对项目进行树形抖动并删除未使用的组件。您不仅可以删除Javascript代码，还可以删除所有样式和HTML。

当它打开时，样式会作为嵌入样式注入DOM。 Angular会跟踪文档所需的样式，并根据需要添加或删除样式。这些样式在运行时可能会出现奇怪的名称，就像你问题中那样。

您需要阅读https://angular.io/guide/component-styles样式指南，了解如何定义:host样式。这是打开视图封装时分配给组件的样式。使用:host时，您可以使用:host-context路径引用父选择器，也可以使用/deep/选择器在其他子组件内设置样式。

请记住。这都是可选的。它默认开启，但如果您不想使用它。你可以把它关掉。

您可以在定义组件时更改视图封装模式。要禁用此功能，只需将encapsulation选项更改为 native 。

参见指南：

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

如何在子css选择器中使用父组件的类

1 个答案: