使用全局 styles.scss 来控制每个 Angular 组件的 :host

Question

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

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

减少冗余并将通用定义移至styles.scss似乎是一个明智的决定。这样做时，我注意到，虽然

DIV

样式继续按预期工作，但对伪选择器的影响消失了。

谷歌搜索告诉我，我无法从组件的内部到达宿主元素，但它没有说明从组件的外部更改它（我的全局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. 就是这样！

Answer 2

有一种方法可以为 SASS 定义自己的导入路径，例如 node_modules 库，您所需要做的就是在 angular.json 文件的选项部分中创建 stylePreprocessorOptions 条目。您不需要使用 src\sass 包含所有内容

angular.json
"options": {
  "outputPath": "dist/App",
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "src/tsconfig.app.json",
  "assets": [
    "src/favicon.ico",
    "src/assets"
  ],
  "styles": [
    "src/sass/styles.scss"
  ],
  "stylePreprocessorOptions": {
    "includePaths": [
      "src/sass"
    ]
  },
  "scripts": []
},

现在在您的组件样式中只需导入 styles.scss 即可。不要包含文件扩展名或首字母 ~

@import './styles.scss';

Answer 3

我也有类似的问题。我希望能够以一致的方式调整某些组件的主机样式，但不是所有组件（我正在设置高度和溢出）。我使用

@HostBinding('style')

 并创建了一个全局常量。所以每个班级我都希望有这个共同的风格，我这样做：

import { Component, HostBinding} from '@angular/core';
import { MAIN_CONTENT_HOST_STYLE} from '../../app.constants';

//Using HostBinding directly to set the Default style for main screen

@Component({
  selector: 'app-my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})
export class MyComponent {
  @HostBinding('style') style = MAIN_CONTENT_HOST_STYLE;
}