Question

我有两个Angular组件：

@Component({
    selector: ‘component-a’,
    templateUrl: './component-a.html',
    styleUrls: [ ‘./component-a.scss' ],
})

@Component({
    selector: ‘component-b’,
    templateUrl: './component-b.html',
    styleUrls: [ ‘./component-b.scss' ],
})

在component-a HTML中：

<div class=“cmp-a-container”>
    component A
    <component-b></component-b>
</div>

和component-b HTML：

<div class=“cmp-b-container”>
    component B
</div>

component-b在其他组件中重复使用。但是在component-b内使用component-a时，我希望它在.cmp-b-container类上应用一组特定样式。

如果我将以下代码添加到component-a.scss，

.cmp-a-container {
  .cmp-b-container { /* Styles here */ }
}

样式不适用。我相信这是Angular的工作方式。

所以我的解决方法是在styles.scss（全局sass文件）上添加样式。

这是正确的方法吗？还是有办法将component-a的样式表中指定的样式应用于component-b的内部html，当它被component-a包裹时？为什么Angular没有这样做？

我使用的是Angular-Cli和Sass。

Answer 1

您应该使用:: ng-deep以便将样式传播到子组件，请参阅https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

它应该是这样的：

.cmp-a-container ::ng-deep{
  .cmp-b-container { /* Styles here */ }
}

如何在Angular-Cli中的组件-A样式表中将样式应用于组件-B而不使样式全局应用？

1 个答案: