全局冲孔组件样式

Question

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

基本上，我使用的是包装在custom-component中的mat-card组件。在某些情况下，当自定义组件前面有另一个custom-component时，我希望将样式更改为垫卡

我们的想法是：

global-styles.scss

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

host-context看起来是个好主意，我试过了

custom-component.scss

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

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

干杯

Answer 1

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

如果要使用选择器your-component将样式应用于组件，则必须在组件:host中设置display: block;属性。我完全没有注意到这一点，但它看起来像这样：

your-component.css

:host {
  display: block;
}

您的父组件css

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

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

Answer 2

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

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

您的用法可能如下：

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

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

然后使用带有embedded属性的ngClass触发颜色更改。

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