Angular2 嵌入 - 将 css 应用于子元素类

Question

我有一个名为 dropdown 的控件，它使用嵌入。注意第二行的“下拉内容”类：

<div>
  <div *ngIf="dropdownVisible" class="dropdown-content">
    <ng-content select="dropdowncontent"></ng-content>
  </div>
</div>

我已经构建了第二个控件，它尝试使用第一个控件：

<dropdown>
  <dropdowncontent>
     //some stuff here
  </dropdowncontent>
</dropdown>

我正在尝试使用第二个控件中的样式注释将样式应用于第一个控件的下拉内容类。

styles: [`
    .dropdown-content {
        border: green solid 5px;
    }
`]

但是样式规则似乎没有被应用。我假设我的努力受到了与影子 dom 相关的阻碍，但我不确定。

有没有办法让父控件将样式应用到子控件？

一旦控件被渲染，html 的开头看起来像这样：

<dropdown _ngcontent-lgf-3="" _nghost-lgf-4="">
    <div _ngcontent-lgf-4="">
    <div _ngcontent-lgf-4="" class="dropdown-content">
            <dropdowncontent _ngcontent-lgf-3="">

这表明在最终的 html 中正在生成类“dropdown-content”。

Answer 1

你可以从父 scss 文件中去

:host /deep/ .child-css-class {
    some-scss
}

see here供参考