在Angular 6中,无法预定义styleUrls。您可以使用以下方法来解决这个问题:
使用内联样式: 您可以在组件的@Component装饰器中使用styles属性来定义内联样式。例如:
@Component({
selector: 'app-example',
template: 'This is an example component with inline styles
',
styles: ['p { color: blue; }']
})
export class ExampleComponent { }
使用全局样式: 您可以在根目录的styles.css文件中定义全局样式,这些样式将应用于整个应用程序。例如,您可以在styles.css中添加以下样式:
p {
color: blue;
}
然后,在组件的@Component装饰器中,不需要定义styleUrls属性,只需定义模板。例如:
@Component({
selector: 'app-example',
template: 'This is an example component
'
})
export class ExampleComponent { }
将样式文件导入到组件中: 如果您想要将样式文件与组件相关联,并将其包含在组件的构建中,您可以使用相对路径将样式文件导入到组件中。例如,假设您有一个example.component.scss样式文件,您可以在组件的@Component装饰器中导入它,并将其分配给styleUrls属性。例如:
import { Component } from '@angular/core';
import './example.component.scss';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss']
})
export class ExampleComponent { }
在上面的示例中,example.component.scss文件将与example.component.ts组件文件一起构建,并在组件中应用其中定义的样式。
使用上述任何一种方法,您都可以在Angular 6中定义和应用样式。