Angular2在组件之外更改父样式

Posted 2023-02-22

【中文标题】Angular2在组件之外更改父样式

【英文标题】：Angular2 change parent styles outside of component

【发布时间】：2018-03-06 00:41:30

【问题描述】：

我想更改当前组件范围之外的组件样式。我的 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 只加载/应用一次 - 当组件初始化/进入视图时）

【参考方案1】：

特殊选择器旨在访问和应用封装之外的 css，而无需更改封装范围。在您的情况下，我认为 :host 或 :host-context 会有所帮助。

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

使用 :host 伪类选择器来定位元素中的样式 承载组件（而不是定位在 组件的模板）。

和

有时根据外部的某些条件应用样式很有用 组件的视图。例如，可以应用 CSS 主题类 到文档元素，你想改变你的 组件的外观基于此。

使用 :host-context() 伪类选择器，其工作方式与 :host() 的函数形式。 :host-context() 选择器寻找一个 组件宿主元素的任何祖先中的 CSS 类，直到 文档根。 :host-context() 选择器在组合时很有用 与另一个选择器。

【参考方案2】：

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

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

如果您想根据当前路线更改您的app-nav（或稍后提到的main-nav，我不确定这是否是我的错误），您应该通过注入@987654323 来实现@ 并查询它以确定您想要的特定版本的标头。

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

这些更改只应用一次，如果我使用 routerLink 去其他路线

这是意料之中的，因为样式仅在您访问实际组件时才被注入到 DOM 中，因此无需在需要之前出现它们。 Angular 期望您为组件定义的样式并在该组件上使用 only。你打破了这个经验法则。

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

你的观察是正确的。

【讨论】：

这样做的动机基本上是我不希望 app-nav 组件中的某些样式规则在所有组件中都使用，例如：在显示 home 组件时导航不透明度：0.5当显示任何其他组件时，它的不透明度：1。当然这是一个常见问题，我只是想知道是否有更好的方法来解决它？

当你提到'另一种选择是简单地将标题移动到路由器出口下方'时，你的意思是只是将 嵌套在 中吗？我刚刚对此进行了测试，并尝试在 home.component.css 的 app-nav 组件中添加一个针对类的 css 规则，但它不起作用