我注意到我的应用程序中的每个视图都有一个这样开头的样式文件。
: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
伪类?还是这是一种特殊情况,不能做,不能做?
编辑
仅使用 CSS 的简单解决方案 -:host>* { color: blue; }
在根组件中。
注意:这个CSS规则只会设计第一层的组件,如果你想应用到应用程序的所有组件,你将需要使用原来的答案
原创
我一直在寻找一种优雅的方式来满足您的要求,而我能够实现这一目标的最佳方式是使用 SASS。 我做了一个实验,发现当继承具有:host
定义的 SASS 文件时,
:host
选择器引用继承它的组件。经过尝试,下面的步骤与 CSS 的效果是一样的;
步骤(SCSS / CSS 测试):
src
下添加新文件夹,命名为
styling
(或任何你想要的),添加新文件名
_base.scss
(注意下划线)
_base.scss
内添加
:host
的样式
sass
样式中,在第一行添加
@import "~src/styling/base";
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';
@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;
}