css - 如何从嵌入的组件设置宿主组件的样式

Question

我有 2 个组件，一个父组件和一个子组件。父级包含子级并使用它来包装一些内容并为其添加标题。 子组件使用嵌入来实现这一点。

父模板如下所示:

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

不过我认为这已被弃用。最合适的方法是将输入传递给 child 。我建议: 1) 向子类添加一个@Input() titleColor。 2) .red CSS 样式，背景颜色:红色。给 child 的CSS 3) 添加一个 [ngClass]="titleColor"到子类 h2