Angular2更改組件外的父級樣式

Question

我想更改當前組件範圍之外的組件樣式。在我app.component.html的標記如下：

我期待從由一個加載的「家庭成分」改變風格的應用程序，導航組件類main-nav的路線。我在導航中使用了routerLink，我發現如果我將encapsulation: ViewEncapsulation.None添加到home.component.ts我可以更改app-nav組件中類的樣式，但是這些更改僅應用一次，如果我使用其他路徑在routerLink的，我不能恢復的變更（好像CSS是隻加載/施一次 - 在組件初始化/映入眼簾）

Answer 1

改變我的電流分量的範圍之外的樣式的分量

在我說別的之前，這是非常沮喪的。組件應該是獨立實體，它可以在您的項目中重用，甚至可以在其他項目中重用。通過創建一個只能通過CSS來更改系統中其他內容的組件，您將創建一個緊密的耦合，這很難從代碼中立即看到，從而導致難以調試的錯誤和其他錯誤。

如果你想改變你的app-nav（或main-nav，你是指它以後，我不知道這是我的錯誤），基於當前路線，你應該通過注入ActivatedRoute並詢問這樣做確定你想要的標題的特定版本。

另一種選擇是簡單地將標題移動到路由器插座下方，因此您總是可以直接從整個頁面上的組件訪問它。

的變化僅應用一次，如果我去使用其他路由routerLink的

這是意料之中的，因爲只有當你訪問實際的組件，不需要的風格注入到DOM他們在需要之前出現。 Angular期望您爲組件定義的樣式，並在該組件上僅使用。你打破了這個經驗法則。

我不能恢復的變更（好像CSS是隻加載/施一次 - 在組件初始化/映入眼簾）

你的觀察是正確的。

Answer 2

特殊選擇器旨在訪問並在封裝外部應用css而無需更改封裝範圍。在你的情況下，我認爲：主機或：主機上下文將有所幫助。

見https://angular.io/guide/component-styles#special-selectors

使用：主機僞類選擇目標樣式承載組件（相對於瞄準 組件模板中的元素）的元素 。

和

有時是非常有用的應用，基於外部組件的觀點 一些條件樣式。例如，可以將一個CSS主題類 應用於文檔元素，並且您想要根據該主題類別更改您的 組件的外觀。

使用：host-context（）僞類選擇器，其工作方式與 的功能形式如下：host（）。 ：host-context（）選擇器在組件主機元素的任何祖先中查找 CSS類，直到 文檔根。當與其他選擇器組合時，host-context（）選擇器很有用。