在Angular 2中,可以使用@Component
装饰器的styleUrls
属性来引用另一个组件的CSS文件。以下是一个示例解决方法:
假设我们有两个组件:ComponentA
和ComponentB
。ComponentA
想要使用ComponentB
的CSS样式。
首先,在ComponentB
组件的文件中,将CSS代码写在一个单独的CSS文件中(例如componentB.css
):
/* componentB.css */
.container {
background-color: red;
}
然后,在ComponentB
组件的文件中,使用@Component
装饰器的styleUrls
属性来引用该CSS文件:
import { Component } from '@angular/core';
@Component({
selector: 'component-b',
templateUrl: './componentB.html',
styleUrls: ['./componentB.css']
})
export class ComponentB {
// ComponentB的逻辑代码
}
接下来,在ComponentA
组件的文件中,也使用@Component
装饰器的styleUrls
属性来引用ComponentB
的CSS文件:
import { Component } from '@angular/core';
@Component({
selector: 'component-a',
templateUrl: './componentA.html',
styleUrls: ['./componentA.css', '../componentB/componentB.css']
})
export class ComponentA {
// ComponentA的逻辑代码
}
在ComponentA
的styleUrls
数组中,我们添加了'../componentB/componentB.css'
,以引用ComponentB
的CSS文件。
现在,ComponentA
将能够使用ComponentB
的CSS样式。