css - 使用全局styles.scss控制:host of every Angular component

Question

我注意到我的应用程序中的每个 View 都有一个这样开头的样式文件。

:host {
  display: flex;
  background-color: blue;
}
div.foo {
  background-color: red;
}

减少冗余并将通用定义移动到 styles.scss 似乎是一个明智的决定。这样做时，我注意到，虽然 DIV 样式继续按预期工作，但对伪选择器的影响消失了。

谷歌搜索给了我 I can't reach the host element from inside the component但它没有说明如何从它的外部 更改它(我的全局 styles.scss 当然是)。我还在 Angular view encapsulation 上找到了一个博客然而，其中详细讨论了细节，而没有提及全局 styles.scss。

总而言之，我发现了很多关于处理 :host 的信息以及很多关于应用全局 styles.scss 的信息。但是，我看到它们之间的交集相当有限。这种缺乏明确确认的情况通常意味着它是不可行的，或者至少是非常不鼓励的。

我是否误解了文档中的观点？如果是这样，我如何从我的全局 styles.scss 控制 :host 伪类？还是不能做的特例？

Answer 1

编辑

仅使用 CSS 的简单解决方案 - :host>* { color: blue; 在你的根组件中。

注意:这个 CSS 规则只会设计第一层的组件，如果你想应用到应用的所有组件，你需要使用原始答案

原创

我一直在寻找一种优雅的方式来获得您的要求，而我能够实现这一目标的最佳方式是使用 SASS。我做了一个实验，看到当继承一个带有 :host 定义的 SASS 文件时，:host 选择器指的是继承它的组件。

经过尝试，以下步骤与 CSS 相同；

步骤(SCSS/CSS 测试):

1. 在 src 下添加名为 styling 的新文件夹(或任何你想要的)，添加新文件名 _base.scss (注意下划线)

2. 在 _base.scss 中为 :host 添加样式

3. 在您的组件 sass 样式中，在第一行添加 @import "~src/styling/base";

4. 就是这样!