我想更改当前组件范围之外的组件样式。 app.component.html中的标记如下：
<app-nav></app-nav>
<div id='content-container'>
<router-outlet></router-outlet>
</div>
我正在寻找从路线加载的'home-component'更改app-nav组件中的类main-nav的样式。我在导航中使用routerLink，我发现如果我将encapsulation: ViewEncapsulation.None添加到home.component.ts我可以在app-nav组件中更改类的样式但是更改只应用一次，如果我使用routerLink转到其他路径，我无法恢复更改（似乎css只加载/应用一次 - 当组件初始化/进入视图时）
答案 0 :(得分：2)
更改当前组件范围之外的组件样式
在我说什么之前，我们非常气馁。组件应该是自包含实体，可以在您的项目甚至其他项目中重复使用。通过创建仅通过CSS更改系统中其他内容的组件，您将创建紧密耦合，这很难立即从代码中看到，导致难以调试的错误和其他错误。
如果您想根据当前路线更改app-nav（或稍后引用的main-nav，我不确定这是否是我的错误），您应该通过注入ActivatedRoute并查询它以确定您想要的标题的特定版本。
另一种选择是简单地将标题移动到路由器插座下方，因此您始终可以从整个页面中的组件直接访问它。
如果我使用routerLink的
转到其他路线，则只会应用一次更改
这是预料之中的，因为只有当您访问实际组件时才将样式注入DOM，在需要之前不需要它们出现。 Angular期望您为组件定义的样式，并在该组件上仅使用 。你违反了这条经验法则。
我无法恢复更改（看起来css只加载/应用一次 - 当组件初始化/进入视图时）
你的观察是正确的。
答案 1 :(得分：1)
特殊选择器旨在访问和应用封装外的css，而无需更改封装范围。在你的情况下，我认为：host或：host-context将有所帮助。
请参阅https://angular.io/guide/component-styles#special-selectors
使用：host伪类选择器来定位元素中的样式 托管组件（而不是目标元素） 组件的模板）。
和
有时根据外部条件应用样式很有用 组件的视图。例如，可以应用CSS主题类 到文档元素，你想改变你的方式 组件看起来基于此。
使用：host-context（）伪类选择器，它就像 函数形式：host（）。 ：host-context（）选择器查找a CSS类在组件主机元素的任何祖先中，最多为 文件根。 ：host-context（）选择器在组合时很有用 与另一个选择器。