Angular 2 Styling nicht auf Child Komponente

Question

Ich versuche, Styling auf eine Kindkomponente Tag anwenden, aber ich kann das nicht tun.

Ich habe Kind-Komponente mit Anker-Tag.

Obwohl ich Styling für Anchor-Tag in der übergeordneten Komponente haben, gilt es nicht. Was ist die Lösung dafür?

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

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

In der übergeordneten Komponente i bin mit dem Kind Komponente und Anwendung Styling für dieses Kind Komponente.

Html-Code:

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

Css Code:

.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; 
} 

Answer 1

Es ist, weil durch Standardkomponenten Ansicht Kapselung (shadow dom) haben. Um dieses Verhalten zu deaktivieren, können Sie nutzen das encapsulation Attribut, wie unten beschrieben:

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{ 

} 

dieses plunkr Siehe: http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview.

Answer 2

Bei Verwendung der styleUrls-Eigenschaft sind die Stile lokal für die eine Komponente, nicht für die untergeordneten Elemente. Also habe ich zwei Änderungen vorgenommen: 1) Die styleUrls wurden in die testapp-Komponente verschoben. 2) Das div wurde in die Testapp-Komponente verschoben.

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{ 

} 

Answer 3

EDITED: Dies sollte lösen:

in der CSS-Kinder Klasse schreiben Code unten

:host.parentclass childclass{ 

} 

Die Parent ist unmittelbar übergeordnete des Kindes. Unterklasse ist die Klasse, die auf die untergeordnete Komponente angewendet wird.