Angular 2样式不适用于Child Component

I'm trying to apply styling to a child component tag, but i can't do that.

我正在尝试将样式应用于子组件标记，但我不能这样做。

I have child component with anchor tag.

我有带锚标签的子组件。

Even though i have styling for anchor tag in the parent component, its not applying. What's the solution for it?

即使我在父组件中为锚标签设置了样式，但它还没有应用。它有什么解决方案？

Working code: http://plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview

工作代码：http：//plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt？p = preview

 <a href="https://www.google.com">Google</a>

In the parent component i'm using the child component and applying styling for this child component.

在父组件中，我正在使用子组件并为此子组件应用样式。

Html code:

Html代码：

<div class="container">
  <div class="test">
    <testapp></testapp>
  </div>
</div>

Css code:

Css代码：

.container{
  font-family:sans-serif;
  font-size:18px;
  border: 1px solid black;
}
.test{
  width:50%;
  background-color:#f0f5f5;
}

.container:hover .test{
  background-color:#e6ffe6;
}
.container:hover .test:hover{
  background-color:#ffffe6;
}
.container .test a {
    color:   red ;
}
.container .test a:hover {
    color:green;
}

3 个解决方案

#1

It's because by default components have view encapsulation (shadow dom). To disable this behavior, you can leverage the encapsulation attribute, as described below:

这是因为默认情况下组件具有视图封装（阴影dom）。要禁用此行为，您可以利用封装属性，如下所述：

import {Component, ViewEncapsulation} from '@angular/core';
import {TestApp} from 'testapp.component.ts';
@Component({
  selector:'test-component',
  styleUrls: ['test.component.css'],
  templateUrl: './test.component.html',
  directives:[TestApp],
  encapsulation: ViewEncapsulation.None // <------
})
export class TestComponent{

}

See this plunkr: http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview.

请参阅此plunkr：http：//plnkr.co/edit/qkhkfxPjgKus4WM9j9qg？p = preview。

#2

When using the styleUrls property, the styles are local to the one component, not to its children. So I made two changes: 1) Moved the styleUrls to the testapp component. 2) Moved the div to the testapp component.

使用styleUrls属性时，样式是一个组件的本地，而不是其子组件。所以我做了两处更改：1）将styleUrls移动到testapp组件。 2）将div移动到testapp组件。

import {Component} from '@angular/core';
@Component({
 selector:'testapp',
 styleUrls: ['./test.component.css'],
 template: `
 <div class="test">
  <a href="https://www.google.com">Google</a>
 </div>

 `

})
export class TestApp{

}

#3

EDITED: This should solve:

编辑：这应该解决：

In the css of child class write below code

在子类的CSS中写下面的代码

:host.parentclass childclass{

}

The parentclass is immediate parent of child. childclass is the class applied to child component.

父类是子的直接父级。 childclass是应用于子组件的类。

#1