如何在Angular 2中基於組件有條件添加樣式表？

我有一個組件styleUrls。如何在Angular 2中基於組件有條件添加樣式表？

默認情況下不顯示此組件，因爲我有一個*ngIf。

如果爲true，則該組件將顯示在具有CSS的頁面中。 CSS會自動添加到文檔<head>。

如果爲false，則組件不再顯示，但其CSS仍在頁面中，位於<head>的內部。

當組件本身不顯示時，如何從<head></head>中刪除此CSS？

來源

2017-06-14 Steffi

您可以在您的index.html使用條件樣式表使用*ngIf='YOUR_COMPONENT_ROUTE_HERE === THIS_ROUTE'. Not sure if the stylesheet will load.

您可以設置條件CSS類是這樣的：

<element NgStyle={condition? true: false} > </element>

例如：

<element NgStyle={isNew ? 'new' : 'default' } > </element>

讓我知道你是否有任何進一步的問題..

來源

2017-06-14 15:38:43 Moshe

我想添加一些CSS以外我的c omponent，比如「body」或「html」，它們位於根組件之外。 – Steffi

我認爲這裏可能會有一個更優雅的解決方案，我只需要更多的信息來處理你真正想要完成的工作 – Moshe

是啊！我的根組件中有一個名爲Popup的組件。 Popup組件的CSS不在加載頁面，因爲組件不顯示。一旦顯示彈出組件，CSS也是如此。但是當彈出不再顯示時，CSS仍然存在。在CSS中，我有這樣的屬性，它改變（在根組件之外，在彈出組件之外）和#header（在根組件之外，但在彈出組件之外）的CSS。我怎樣才能做到這一點，而無需通過ID獲取元素訪問DOM ......？謝謝 – Steffi

如何在Angular 2中基於組件有條件添加樣式表？

回答

相關問題