在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样式。