全局穿透组件样式答案

【问题标题】：Pierce component style globally全局穿透组件样式
【发布时间】：2019-10-27 13:24:54
【问题描述】：

我需要从全局 styles.scss 文件中穿透我的组件的样式。

基本上，我使用了包裹在custom-component 中的mat-card 组件。在在某些情况下，当自定义组件前面有另一个 custom-component

时，我想将样式更改为 mat-card

这个想法是：

全局样式.scss

custom-component ~ custom-component::ng-deep { 
    .mat-card {
       background-color: red;
    }
}

host-context 似乎是个好主意，我试过这样

自定义组件.scss

// does not work
host-context(~custom-component) { background-color: red; }

我已经尝试过这个和其他一些组合，但它们似乎不起作用。我们应该如何使用 >、~、+ 选择器来设置角度组件的样式？

干杯

【问题讨论】：

【解决方案1】：

我个人不惜一切代价避免刺穿选择器。它破坏了整个组件模型，并紧密耦合了代码。

我会以稍微不同的方式处理这个问题。我会让我的custom-component 有一个可选的Input() embedded = false

你的用法可能如下：

// top level
<custom-component></custom-component>

// nested level
<custom-component [embedded]="true"></custom-component>

然后使用ngClass 和embedded 属性来触发颜色变化。

有关ngClass 的更多信息，请参阅文档 https://angular.io/api/common/NgClass

【讨论】：

【解决方案2】：

好吧，这不是一个解决方案，但需要考虑一件事。

如果您想使用选择器your-component 将样式应用于组件，则必须在组件:host 中设置display: block; 属性。我完全错过了这个，但它看起来像这样：

你的组件.css

:host {
  display: block;
}

你的父组件 css

your-component ~ your-component {
  margin-top: 15px;
}

而且它有效。我的问题最初与此有关。

【讨论】：