从父组件角度更改子组件样式，但不在全局范围内

Question

bounty到期在7天内。该问题的答案有资格获得+ 50声望赏金。Phoenix404正在寻找来自信誉良好的来源的答案。

我已经基于<nextgen-table></nextgen-table>（角材料）创建了一个共享组件（Mat-table）。在项目中使用此组件时，发现我需要更改表列的行为（宽度）。

我已经将nextgen-table导出到我的其他组件中（假设X，Y），其中nextgen-table当然是子组件。

要更改mat-table的特定列的宽度，我必须使用类似以下内容：

mat-cell:nth-child(1),
mat-header-cell:nth-child(1) {
    flex: 0 0 40%;
    text-align: left;
} 
mat-cell:nth-child(2),
mat-header-cell:nth-child(2) {
    flex: 0 0 20%;
}

以上我在X.component.css中实现的CSS代码，由于封装原因，它无法正常工作。

经过一些搜索后，我发现solution可以正常工作，只需将encapsulation: ViewEncapsulation.None添加到x.component.ts的组件装饰器中即可。解决方案之后，我从组件X导航到没有实现上述CSS代码的组件Y。但是组件Y具有前两列，因为我只希望对组件X有需求，但是组件Y也有我不希望对组件Y拥有的需求。

所以我的问题是如何从仅适用于父组件而不适用于其他组件的父组件更新nextgen-table的样式。

我也曾尝试使用

:host(mat-cell:nth-child(1)){
  flex: 0 0 40%;
  text-align: left;
}

:host(mat-header-cell:nth-child(1)) {
    flex: 0 0 40%;
    text-align: left;
}

但是什么都没发生/没有改变。

感谢您的帮助

Answer 1

您可以使用::ng-deep pseudo class专门针对子元素，而无需更改整个组件的视图封装（这将意味着其所有规则都会泄漏）。

注：::ng-deep自从几个主要版本以来已被标记为不推荐使用，但是直到有解决方法时，它们才会删除suppoprt。

parentX.html

<div class="compContainer">
    <nextgen-table></nextgen-table>
</div>

parentX.scss

::ng-deep .compContainer
{
    mat-cell:nth-child(1),
    mat-header-cell:nth-child(1) {
        flex: 0 0 40%;
        text-align: left;
    } 
    mat-cell:nth-child(2),
    mat-header-cell:nth-child(2) {
        flex: 0 0 20%;
    }
}

您还可以将CSS规则添加到全局style.scss文件。

//Rules for parent X
app-parent-componentX .compContainer
{
    mat-cell...
}

//Rules for a parent Y
app-parent-componentY .compContainer
{
    mat-cell...
}