Css Angular2更改组件外部的父样式

我想更改当前组件范围之外的组件的样式。my app.component.html中的标记如下所示：

<app-nav></app-nav>
<div id='content-container'>
<router-outlet></router-outlet>
</div>

我希望更改应用导航组件中类

主导航

的样式，而不是从路由加载的“主组件”。我在导航中使用了

routerLink

，并且我发现若我在

home.component.ts中添加了
封装：viewenclosuration.None
，我可以在app-nav组件中更改类的样式，但这些更改只应用一次，若我使用
routerLink
，转到其他路由，我就无法恢复更改（似乎css只加载/应用一次-当组件初始化/进入视图时）

更改当前组件范围之外的组件样式

在我说别的之前，这是非常令人沮丧的。组件应该是自包含的实体，可以在您的项目甚至其他项目中重用。通过创建一个只通过CSS更改系统中其他内容的组件，您正在创建一个紧密耦合，这很难从代码中立即看到，从而导致难以调试的bug和其他错误

如果您想根据当前路线更改
应用程序导航
（或您稍后提到的
主导航
，我不确定这是否是我的错误），您应该通过注入
ActivatedRoute
并查询它来确定所需的特定标题版本

另一种选择是简单地将标题移动到路由器出口下方，这样您就可以始终从位于整个页面上的组件直接访问它

这些更改只应用一次，如果我使用routerLink的

这是意料之中的，因为只有当您访问实际组件时，样式才会被注入DOM中，所以不需要在需要之前显示它们。Angular希望您为组件定义的样式仅用于该组件。你打破了这个经验法则

我无法还原更改（似乎css只加载/应用一次-当组件初始化/进入视图时）

您的观察是正确的。
特殊选择器设计用于访问和应用封装外部的css，而无需更改封装范围。在您的情况下，我认为：host或：host上下文将有所帮助

看

使用：host伪类选择器以元素中的样式为目标
托管组件（而不是在
组件的模板）

及

有时，根据外部条件应用样式很有用
组件视图的一部分。例如，可以应用CSS主题类
添加到document元素，并且您希望更改
组件的外观基于此

使用：host-context（）伪类选择器，其工作原理与
函数形式：host（）。：host-context（）选择器查找
组件宿主元素的任何祖先中的CSS类，直到
文档根目录。：host-context（）选择器在组合时很有用
使用另一个选择器

这样做的动机基本上是，我不想在所有组件中使用app nav组件中的一些样式规则，例如：显示主组件时导航不透明度为0.5，显示所有其他组件时其不透明度为1。当然这是一个常见的问题，我只是想知道是否有更好的方法来解决它？当您提到“另一个选择是简单地将头移动到路由器出口下方”时，您的意思是只将头嵌套在路由器出口中吗？我刚刚测试了这一点，并试图添加一个css规则，该规则针对我home.component.css中的app nav组件中的一个类，但没有成功