*ngContainerOutlet 样式不适用于 ng-component 封装

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 一起使用

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

原创

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

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

另见

• Load external css style into Angular 2 Component
• Angular 2: How to style host element of the component?
• Styles in component for D3.js do not show in angular 2
• Angular2 - adding [_ngcontent-mav-x] to styles