*ngContainerOutlet样式不使用ng组件封装

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，要么使用角(例如，防止这种封装)？

谢谢你，亚历山大

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
• ngcontent-mav-x] to styles