如何通过嵌入的组件设置宿主组件的样式

Question

我有两个部分，父母和孩子。父级包含子级，并使用其包装一些内容并为其添加标题。 子组件通过包含来实现这一目的。

父模板如下：

<div class="parent">
  <child [title]="componentTitle" class="child">
    <p>some content</p>
  </child>  
</div>

子模板看起来像：

<div class="child">
  <h2 class="title">{{title}}</h2>
  <ng-content></ng-content>
</div>

当我尝试使用父组件的CSS控制样式时，我可以轻松处理所有已包含的内容：

.child p {
  background-color: blue;
}

但是，我无法到达标题元素。换句话说，以下规则不起作用：

.child h2.title {
  background-color: red;
}

由于父母是孩子的主人，因此无法使用:host。

有什么建议吗？

Answer 1

好吧，您可以执行以下操作：

::ng-deep {
    .child h2.title {
        background-color: red;
    }
}

我认为这已被弃用。最合适的方法是将输入传递给孩子。我建议： 1）在子类中添加一个@Input（）titleColor。 2）.red CSS样式，背景颜色：红色。给孩子的CSS 3）向子类h2添加[ngClass] =“ titleColor”