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

Posted 2023-02-23

【中文标题】*ngContainerOutlet 样式不适用于 ng-component 封装

【英文标题】：*ngContainerOutlet style not working with ng-component encapsulation

【发布时间】：2017-10-06 19:42:26

【问题描述】：

我使用*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 的解决方案（例如，阻止这种封装）？

谢谢， 亚历山大

【参考方案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

【讨论】：

这正是我需要的，谢谢！这是链接解释它：angular.io/docs/ts/latest/guide/component-styles.html