css样式表作为组件参数/具有单个组件的不同样式表

Question

我有一个下拉菜单组件，我在我的网站中使用，我想在同一个网站上重复使用它，但具有不同的样式。是否可以加载不同的样式表？

Answer 1

正如cyrix建议的那样，我在我的组件标签中使用了一个类：

<dropdown-menu class="blue-theme"></dropdown-menu>

然后我可以使用:host()覆盖dropdown-menu.component.css中的任何现有规则：

span { background-color: white; } /* existing */
:host(.blue-theme) span { background-color: blue; } /* overrided */

Answer 2

您可以使用ng-class来实现此功能。对于第一个用例，设置booleanVar1 = true，booleanVar2 = false，对于第二个用例，设置booleanVar1 = false，booleanVar2 = true。

[ngClass]="{'class1': booleanVar1, 'class2': booleanVar2}"