angular 控件css_angular - 来自父组件的CSS fi的样式子组件

angular - 来自父组件的CSS fi的样式子组件

我有一个父组件：

我想用子组件填充这个组：

父模板：

儿童模板：

Test

由于child和parent是两个独立的组件，它们的风格被锁定在它们自己的范围内。

在我的父组件中，我尝试过：

.parent .child {

// Styles for child

}

但child样式未应用于parent组件。

我尝试使用child将parent的样式表包含到child组件中以解决范围问题：

// child.component.ts

styleUrls: [

'./parent.component.css',

'./child.component.css',

]

但这没有帮助，也尝试了另一种方式将child样式表提取到parent，但这也没有帮助。

那么如何设置包含在父组件中的子组件的样式？

11个解决方案

152 votes

更新 - 最新方式

如果可以避免的话，不要这样做。 正如Devon Sans在评论中指出的那样：这个功能很可能会被弃用。

更新 - 更新的方式

从Angular 4.3.0开始，所有穿孔的css组合器都被弃用了。 Angular团队推出了一个新的组合子encapsulation mode(仍处于实验水平，而不是完整和最终的方式)，如下所示，

演示：[https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview]

styles: [

`

:host { color: red; }

:host ::ng-deep parent {

color:blue;

}

:host ::ng-deep child{

color:orange;

}

:host ::ng-deep child.class1 {

color:yellow;

}

:host ::ng-deep child.class2{

color:pink;

}

`

],

template: `

Angular2 //red

//blue

//orange

//yellow

//pink

`

老路

您可以使用encapsulation mode和/或piercing CSS combinators >>>, /deep/ and ::shadow

工作实例：[http://plnkr.co/edit/1RBDGQ?p=preview]

styles: [

`

:host { color: red; }

:host >>> parent {

color:blue;

}

:host >>> child{

color:orange;

}

:host >>> child.class1 {

color:yellow;

}

:host >>> child.class2{

color:pink;

}

`

],

template: `