Question

我使用*ngContainerOutlet动态加载组件，但它将组件的模板封装在ng-component标记中，导致我的CSS规则失败。

例如：

<div class="my-class">
    <ng-container *ngComponentOutlet="MyComponent"></ng-container>
</div>

我最终得到的结果是：

<div class="my-class">
    <ng-component>
        <div>my content...</div>
    </ng-component>
</div>

导致my-class未应用于组件的模板。

我尝试创建像my-class > ng-component这样的CSS规则，但由于它是动态创建的，因此无法正常工作。与:first-child相同。

是否有解决方案，无论是CSS还是Angular（例如，防止这种封装）？

谢谢，亚历山大

Answer 1

<强>更新

所有新浏览器现在都支持

::slotted，并且可以与`ViewEncapsulation.ShadowDom

一起使用

<强>原始

您可以使用/deep/组合器来克服封装：

:host /deep/ ng-component {
  ...
}

另见