如何動態設置Angular 2+組件的複雜CSS？

Question

我想問一點小小的問題，讓我的大腦開箱即用。

語境

角4使用角CLI和AOT。

https://angular.io/docs/ts/latest/guide/component-styles.html中提到的所有方法都描述了在開發人員編寫組件時設置複雜CSS的方法。

組件創建後，角允許調整個人風格，甚至在組件，請你，所有使用[ngClass]，<div [class.something]="condition">，各種@HostBinding裝飾和一些其他的方法指定不同的CSS類的標籤名稱。

但是，以上都不能更改組件正在使用的CSS聲明。上述方法可以（a）使用開發人員定義的樣式表中已有的內容，或者（b）將單獨的CSS屬性設置爲組件模板中的單個HTML標籤。

問題

我將如何更新運行時整個組件的CSS，以便在該組件響應所有元素到新的CSS？

假設我爲div.someClass引入了一種新風格，並且我希望所有匹配元素div.someClass能夠反映新風格。

Plunker

我嘗試的展示是在這裏：https://plnkr.co/edit/N2C40cSb7hd1AyOxWWdT

的按鈕應該是紅色的基礎上，MyChildComponent.styles

我想我明白爲什麼它不工作的價值我期望的方式：簡而言之，樣式是在編譯期間在組件中構建的，而不是運行時，包括在模板中<style />標籤內發現的樣式。

但知道它爲什麼不起作用並不能幫助我使它工作。

任何幫助高度讚賞。

Answer 1

解決方案1 ​​

插入一個新的CSS類是不可能的（據我所知），但你可以動態插入CSS屬性到您的組件。 我修改了dynamicStyles()這個

get dynamicStyles(): any{ 
    return {'background': 'red' }; 
    } 

返回的字符串，而不是一個對象，因爲你將這個對象傳遞給你的按鈕ngStyle。

在模板中，我改變這樣

<button type="button" 
[ngStyle]="styles"> 
    Button 
</button> 

這裏的按鈕是一個plunkr

解決方案2

這事，我不會建議，但在你的情況下，它可能有用。您可以添加此

encapsulation: ViewEncapsulation.None

和進口

import {ViewEncapsulation} from '@angular/core' 

你@ Component.You可以泄露你的組件的CSS，使您可以在子組件上使用它。然後在你的子組件中，在你的按鈕中添加一個[ngClass]，這樣你就可以通過@Input（）傳遞一個變量，如果它應該是紅色的。

<button type="button" 
    [ngClass]="{'redButton': isButtonRed}" 
    >Button</button> 

而在你的style.css

.redButton{ 
    background:red; 
} 

而在你的主要成分。

<div> 
    <h2>Hello name</h2> 
    <my-child [isButtonRed]="true"></my-child> 
</div> 

這裏的另一個plunkr

希望這有助於。