我想更改当前组件范围之外的组件样式。我的 app.component.html 中的标记如下：
<app-nav></app-nav>
<div id='content-container'>
<router-outlet></router-outlet>
</div>
我希望将 app-nav 组件中的类 main-nav 的样式从路由加载的“home-component”更改。我在导航中使用routerLink，我发现如果我将encapsulation: ViewEncapsulation.None 添加到home.component.ts，我可以更改app-nav 组件中类的样式，但是更改只应用一次，如果我使用routerLink's 转到其他路线我无法恢复更改（似乎 css 只加载/应用一次 - 当组件初始化/进入视图时）
【问题讨论】：
标签： css angular angular2-template angular2-directives
特殊选择器旨在访问和应用封装之外的 css，而无需更改封装范围。在您的情况下，我认为 :host 或 :host-context 会有所帮助。
见https://angular.io/guide/component-styles#special-selectors
使用 :host 伪类选择器来定位元素中的样式 承载组件（而不是定位在 组件的模板）。
和
有时根据外部的某些条件应用样式很有用 组件的视图。例如，可以应用 CSS 主题类 到文档元素，你想改变你的 组件的外观基于此。
使用 :host-context() 伪类选择器，其工作方式与 :host() 的函数形式。 :host-context() 选择器寻找一个 组件宿主元素的任何祖先中的 CSS 类，直到 文档根。 :host-context() 选择器在组合时很有用 与另一个选择器。
【讨论】：
在我当前组件的范围之外更改组件的样式
在我说别的之前，这是非常不鼓励的。组件应该是自包含实体，可以在您的项目甚至其他项目中重复使用。通过创建一个仅通过 CSS 更改系统中其他内容的组件，您正在创建一个紧密耦合，很难从代码中立即看到，从而导致难以调试的错误和其他错误。
如果您想根据当前路线更改您的app-nav（或稍后提到的main-nav，我不确定这是否是我的错误），您应该通过注入@987654323 来实现@ 并查询它以确定您想要的特定版本的标头。
另一种选择是简单地将标题移动到路由器出口下方，因此您始终可以从位于整个页面的组件直接访问它。
这些更改只应用一次，如果我使用 routerLink 去其他路线
这是意料之中的，因为样式仅在您访问实际组件时才被注入到 DOM 中，因此无需在需要之前出现它们。 Angular 期望您为组件定义的样式并在该组件上使用 only。你打破了这个经验法则。
我无法还原更改（似乎 css 只加载/应用一次 - 当组件初始化/进入视图时）
你的观察是正确的。
【讨论】：