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（）选择器很有用。