如何从父组件的CSS文件样式的子组件？
我有一个父组件：
<parent></parent> 我想用子组件来填充这个组：
<parent> <child></child> <child></child> <child></child> </parent>
父模板：
<div class="parent"> <!-- Children goes here --> <ng-content></ng-content> </div>
儿童模板：
<div class="child">Test</div>
由于parent和child是两个独立的组成部分，他们的风格被locking在自己的范围内。
在我的父组件中，我尝试过：
.parent .child { // Styles for child }
但.child样式不会被应用到child组件。
我尝试使用styleUrls将parent的样式表包含到child组件中以解决范围问题：
// child.component.ts styleUrls: [ './parent.component.css', './child.component.css', ]
但是，这并没有帮助，也试图通过将child样式表提取到parent但也没有帮助。
那么如何devise包含在父组件中的子组件呢？
更新 – 新的方式
从Angular 4.3.0开始 ，所有穿孔的css组合器都被弃用了。 Angular团队引入了一个新的组合器::ng-deep （仍然处于实验级别，而不是完整和最终的方式） ，如下所示，
DEMO： 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 <parent> //blue <child></child> //orange <child class="class1"></child> //yellow <child class="class2"></child> //pink </parent> `
老方法
您可以使用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: ` Angular2 //red <parent> //blue <child></child> //orange <child class="class1"></child> //yellow <child class="class2"></child> //pink </parent> `
进入Angular2的Github页面并随机search“样式”后，我发现这个问题： Angular 2 – innerHTML样式
它说使用2.0.0-beta.10添加的东西， >>>和::shadowselect器。
（>>>）（和等效/ deep /）和:: shadow被添加到2.0.0-beta.10中。 它们与阴影DOM CSS组合器（已弃用）相似，只能用于封装：ViewEncapsulation.Emulated，这是Angular2中的默认设置。 他们也可能与ViewEncapsulation.None一起工作，但只是被忽略，因为它们不是必需的。 这些组合器只是一个中间解决scheme，直到支持跨组件样式的更高级function。
所以干脆做：
:host >>> .child {}
在parent的样式表文件解决了这个问题。 请注意，正如上面的报价中所述，这种解决scheme只是中间的，直到支持更高级的交叉组件样式。
更新：
如果使用Angular-CLI，则需要使用/deep/而不是>>> ，否则将无法工作。
更新2：
由于/deep/和其他所有的穿刺select器现在已经被弃用了。 Angular dropped ::ng-deep应该用于更广泛的兼容性。
有相同的问题，所以如果您使用scs / sass的angular2-cli使用'/深/'而不是'>>>'，最后的select器不支持（但与CSS工程很好）。
可惜的是，/ deep / selector已被弃用（至less在Chrome中） https://www.chromestatus.com/features/6750456638341120
总之，似乎（目前）没有长期的解决scheme，而不是以某种方式让你的孩子组件dynamic样式的东西。
您可以将样式对象传递给您的孩子，并通过以下方式应用：
<div [attr.style]="styleobject">
或者如果你有一个特定的风格，你可以使用像这样的东西：
<div [style.background-color]="colorvar">
更多相关的讨论： https ： //github.com/angular/angular/issues/6511
如果你想更有针对性的实际的孩子组件比你应该做的后续。 这样，如果其他子组件共享相同的类名称，则不会受到影响。
Plunker： https ：//plnkr.co/edit/ooBRp3ROk6fbWPuToytO ？ p =预览
例如：
import {Component, NgModule } from '@angular/core' import {BrowserModule} from '@angular/platform-browser' @Component({ selector: 'my-app', template: ` <div> <h2>I'm the host parent</h2> <child-component class="target1"></child-component><br/> <child-component class="target2"></child-component><br/> <child-component class="target3"></child-component><br/> <child-component class="target4"></child-component><br/> <child-component></child-component><br/> </div> `, styles: [` /deep/ child-component.target1 .child-box { color: red !important; border: 10px solid red !important; } /deep/ child-component.target2 .child-box { color: purple !important; border: 10px solid purple !important; } /deep/ child-component.target3 .child-box { color: orange !important; border: 10px solid orange !important; } /* this won't work because the target component is spelled incorrectly */ /deep/ xxxxchild-component.target4 .child-box { color: orange !important; border: 10px solid orange !important; } /* this will affect any component that has a class name called .child-box */ /deep/ .child-box { color: blue !important; border: 10px solid blue !important; } `] }) export class App { } @Component({ selector: 'child-component', template: ` <div class="child-box"> Child: This is some text in a box </div> `, styles: [` .child-box { color: green; border: 1px solid green; } `] }) export class ChildComponent { } @NgModule({ imports: [ BrowserModule ], declarations: [ App, ChildComponent ], bootstrap: [ App ] }) export class AppModule {}
希望这可以帮助！
codematrix
在Angular中有几个选项可以实现这一点：
1）你可以使用深层的CSSselect器
:host >>> .childrens { color: red; }
2）你也可以改变视图封装它被设置为默认模式，但可以很容易地改变为使用Shadow DOM原生浏览器实现的Native，在你的情况下你只需要禁用它
例如：`
import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'parent', styles: [` .first { color:blue; } .second { color:red; } `], template: ` <div> <child class="first">First</child> <child class="second">Second</child> </div>`, encapsulation: ViewEncapsulation.None, }) export class ParentComponent { constructor() { } }
我build议一个例子来说明，因为angular.io/guide/component-styles指出：
阴影刺穿的后代组合器已被弃用，支持正在从主stream浏览器和工具中删除。 因此，我们计划放弃对Angular的支持（对于/ deep /，>>>和:: ng-deep的所有3个）。 在此之前:: ng-deep应该是更好的与工具的更广泛的兼容性。
在app.component.scss ，根据需要导入*.scss app.component.scss 。 _colors.scss有一些常见的颜色值：
$button_ripple_red: #A41E34; $button_ripple_white_text: #FFF;
将规则应用于所有组件
所有具有btn-red类的button都将被设置为样式。
@import `./theme/sass/_colors`; // red background and white text :host /deep/ button.red-btn { color: $button_ripple_white_text; background: $button_ripple_red; }
将规则应用于单个组件
所有在app-login组件上具有btn-red类的button都将被样式化。
@import `./theme/sass/_colors`; /deep/ app-login button.red-btn { color: $button_ripple_white_text; background: $button_ripple_red; }
如果你有权访问子组件代码，我发现它传递一个@INPUTvariables更清晰 ：
这个想法是，父母告诉孩子应该是什么样的状态，孩子决定如何显示状态。 这是一个很好的build筑
SCSS方式：
.active { ::ng-deep md-list-item { background-color: #eee; } }
更好的方法： – 使用selectedvariables：
<md-list> <a *ngFor="let convo of conversations" routerLink="/conversations/{{convo.id}}/messages" #rla="routerLinkActive" routerLinkActive="active"> <app-conversation [selected]="rla.isActive" [convo]="convo"></app-conversation> </a> </md-list>
