Question

我有一个名为dropdown的控件，它使用了transclusion。请注意＆＃39;下拉内容＆＃39;第二行的课程：

<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="">

这表明课程＆＃34;下拉内容＆＃34;正在最终的HTML中制作。

Answer 1

从父scss文件

你可以去

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

see here以供参考

Angular2 transclusion - 将css应用于子元素类

1 个答案: