Angular 6中的全局CSS可以通过以下替代方式进行设置:
src/styles.css
文件中添加全局样式,并在angular.json
文件中引用该全局CSS文件。src/styles.css:
/* 全局样式 */
body {
font-family: Arial, sans-serif;
}
/* 其他全局样式 */
angular.json:
{
"projects": {
"your-project-name": {
"architect": {
"build": {
"options": {
"styles": [
"src/styles.css"
]
}
}
}
}
}
}
HostBinding
装饰器:
在组件中使用HostBinding
装饰器来绑定全局样式。import { Component, HostBinding } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Hello World!
`,
styles: [`
/* 组件内样式 */
h1 {
color: blue;
}
`]
})
export class AppComponent {
@HostBinding('class') className = 'global-styles';
}
在全局CSS中定义global-styles
类样式:
.global-styles {
/* 全局样式 */
font-family: Arial, sans-serif;
}
@import
指令:
在组件的样式文件中使用@import
指令引入全局的CSS文件。app.component.css:
/* 组件内样式 */
h1 {
color: blue;
}
/* 引入全局样式 */
@import url('path/to/global-styles.css');
全局样式文件 global-styles.css:
/* 全局样式 */
body {
font-family: Arial, sans-serif;
}
以上是几种在Angular 6中替代使用全局CSS的方法。根据具体的需求和项目结构,你可以选择适合你的方式来设置全局样式。