作爲組件參數的css樣式表/對單個組件有不同的樣式表

我有一個下拉菜單組件，我在我的網站中使用，我想在同一個網站上重複使用它，但使用不同的樣式。是否有可能加載不同的樣式表？作爲組件參數的css樣式表/對單個組件有不同的樣式表

2017-03-03 Julien

您可以通過添加'styleUrls'陣列多個樣式表（'styleUrls：[「style1.css」，「style2.css」]'）和結合起來，與不同類別的組件上，僅應用正確的樣式 – cyrix

是的，我只是想過，我會試着讓你知道 – Julien

由於Cyrix的建議，我用了一個類中我的組件標籤：

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

那麼我可以用:host()覆蓋任何在下拉-menu.component.css現有的規則：

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

2017-03-03 16:19:14 Julien

您可以使用ng-class來實現此功能。對於第一個用例，設置booleanVar1 = true和booleanVar2 = false，對於第二個用例set booleanVar1 = false和booleanVar2 = true。

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

2017-03-03 16:20:21 Niladri

回答