角2のスタイルが子コンポーネントに適用されない

Question

子コンポーネントのタグにスタイリングを適用しようとしていますが、できません。

私はアンカータグ付きの子コンポーネントを持っています。

親コンポーネントにアンカータグのスタイリングがありますが、適用されません。それのための解決策は何ですか？

の作業コード：親コンポーネントでhttp://plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview

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

私は子コンポーネントを使用してこの子コンポーネントのスタイルを適用しています。

HTMLコード：

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

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

Answer 1

デフォルトのコンポーネントによってビューのカプセル化（シャドウDOM）を持っているからです。後述のように、この動作を無効にするには、あなたは、encapsulation属性を活用することができます：http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview：

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{ 

} 

このplunkrを参照してください。

Answer 2

styleUrlsプロパティを使用する場合、スタイルは、そのコンポーネントではなく、1つのコンポーネントに対してローカルです。そこで私は2つの変更を行いました： 1）styleUrlをtestappコンポーネントに移動しました。 2）divをtestappコンポーネントに移動しました。 EDITED

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

：これは解決する必要があります：コード

:host.parentclass childclass{ 

} 

parentclass下の子クラスの書き込みのCSSの

は、子の直接の親です。 childclassは、子コンポーネントに適用されるクラスです。