代码之家 › 专栏 › 技术社区 › inorganik

无法设置ng组件的样式

angular

1

inorganik · 技术社区 · 8 年前

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

<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%; 我 不想使用视图封装。没有一个 在父组件中,因为我希望隔离样式。

我也不想为ng组件添加全局样式,因为这会在我的应用程序中产生很多我不想要的副作用。

这可能吗?

1 回复 | 直到 8 年前

1

0

Reactgular 8 年前

您可以全局地将DOM元素作为目标,而不会产生副作用。

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

2

0

inorganik 5 年前

解决方法是使用 :host 我的组件中的选择器。scss:

:host {
  width: 100%;
  display: block;
}