时间戳

首页 > 解决方案 > 如何从嵌入的组件中设置宿主组件的样式

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

问题描述

我有 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不起作用。

有什么建议么 ？

标签： cssangulartransclusion

解决方案

好吧，你可以这样做：

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

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

推荐阅读