无法设置ng-component的样式

Question

我有一个带路由器插座的组件。

<div class="main">
  <router-outlet></router-outlet>
</div>

在内部，我将路由到另一个组件，这将导致标记渲染如下：

<div class="main">
  <router-outlet _ngcontent-c0=""></router-outlet>
  <ng-component class="ng-star-inserted">
    <my-component>...</my-compoenent>
  </ng-component>
</div>

问题在于<ng-component>元素没有覆盖整个宽度。我需要它是width: 100%;。我不想在父组件中使用ViewEncapsulation.None ，因为我想要隔离样式。

我也不想为ng-component添加全局样式，因为这会在我的整个应用程序中产生很多我不想要的副作用。

这可能吗？

Answer 1

您可以全局定位DOM元素，而不会产生副作用。

div.main > ng-component {
    width: 100%;
}