子コンポーネントからアプリコンポーネントスタイルを変更する - 角2

Question

子コンポーネントからアプリケーションコンポーネント（親コンポーネント）の背景を変更したいとします。

私は2つのコンポーネントグループを持っているとします.1つのグループは、アプリケーション コンポーネントメニューから直接アクセスするプライマリコンポーネントであり、他のグループはプライマリコンポーネントのメニュー/リンクからアクセスされるセカンダリコンポーネントです。 はので、ここで私は、プライマリとセカンダリのコンポーネントに基づいてアプリケーションのコンポーネントの背景を変更したいロード

https://plnkr.co/edit/t97ZyDz9wfGuPEzuo8J3?p=preview

app.component.cssあなたは子コンポーネントのスタイルプロパティを使用する必要があります

.page-background 
{ 
    background-color:#FFF0F5; 
} 
.page-background-hero 
{ 
    background-color:white; 
} 
.page-background-crisis 
{ 
    background-color:wheat; 
} 

Answer 1

と背景色を指定するdiv要素でコンテンツをラップします。あなたはこの気のためshared serviceを使用して検討する必要があります

危機CENTERの子コンポーネント

@Component({ 
    template: ` 
    <div class="red"> 
     <h2>CRISIS CENTER</h2> 
     <router-outlet></router-outlet> 
    </div> 
    `, 
    directives: [RouterOutlet], 
    providers: [CrisisService], 
    styles:[`.blue{background-color:red} `] 

}) 

HEROSリスト子コンポーネント

@Component({ 
    template: ` 
    <div class="yellow"> 
     <h2>HEROES</h2> 
     <ul> 
      <li *ngFor="#hero of heroes" 
      (click)="onSelect(hero)"> 
      <span class="badge">{{hero.id}}</span> {{hero.name}} 
      </li> 
     </ul> 
    </div> 
    ` 
    styles:[`.yellow{background-color:yellow} `] 
}) 

UPDATED PLUNK

Answer 2

親子通信のそれはロード時に

親が（ngOnInit経由）子供が背景スタイルなどの情報をプッシュすると、サービスに

を購読することができ別の方法としては、どの色を決定するためにContentChildrenを経由して親コンポーネントへのアクセスに子供を持っているだろう背景をに変更する。