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

发布时间：2020-12-17 07:01:30 所属栏目：安全来源：网络整理

导读：我有一个名为dropdown的控件,它使用transclusion.请注意第二行的“下拉内容”类： div div *ngIf="dropdownVisible" class="dropdown-content" ng-content select="dropdowncontent"/ng-content /div/div 我已经构建了第二个控件,试图使用第一个控件： dropd

我有一个名为dropdown的控件,它使用transclusion.请注意第二行的“下拉内容”类：

<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”.

解决方法

从父scss文件你可以去

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

see here供参考

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!