html - Angular 组件上的条件样式表？

我遇到的情况是，除了样式表中的1个变量之外，我的组件几乎相同。假设我有component1的CSS：

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

和component2的CSS：

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

假设两个组件上的HTML以及.ts代码都相同。
但是，每个元素都有一个ng-content。是否有一种添加margin: 12px的方法对component2很重要。

在组件声明中，是否可以有条件样式或样式表（在这种情况下，变化多于margin: 12px，但其他所有条件都相同）？

最佳答案

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

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