Angular 组件上的条件样式表？答案

【问题标题】：Conditional stylesheet on Angular Component?Angular 组件上的条件样式表？
【发布时间】：2018-09-23 02:17:31
【问题描述】：

我有一种情况，我必须使用几乎相同的组件，除了样式表中的 1 个变量。所以假设我有component1的css：

.selector {
    background-color: 'red';
    margin: 12px;
}

还有component2的css：

.selector {
    background-color: 'red';
}

假设两个组件上的 HTML 和 .ts 代码相同。但是，每个都有一个 ng-content，Is there a way to add the margin: 12px 对于 component2 很重要。

有没有办法在组件声明中拥有条件样式，甚至是样式表（如果有比margin: 12px 更多的变化，但其他一切都一样）？

【问题讨论】：

ngClass 会起作用吗？ angular.io/api/common/NgClass
不完全是。问题是，该类嵌套在组件中，所以当我调用它时，我无法直接访问它。我可能会在根组件中创建一个 @Input() 并获取该信息，但我只有两种情况，所以这可能不是最好的解决方案

标签： html css angular typescript sass

【解决方案1】：

你考虑过继承吗？也许 Component2 可以扩展 Component1 但引用不同的 styleUrl。这样 Component2 将拥有 Component1 中包含的所有逻辑和变量

@Component({
  selector: "app-component-2",
  templateUrl: "./component1.html",
  styleUrls: ["./component2.css"]
})
export class Component2 extends Component1 {}

【讨论】：