ネストされたコンポーネントの親の背景イメージを角度2でどのように変更できますか？

Question

私のアプリケーションのルートごとに、親の背景イメージを変更する必要があります。私はこれを達成するために各ネストされたコンポーネントのstyleプロパティを使用しています。ViewEncapsulationを各コンポーネントのNoneに設定すると、グローバルな効果が得られます。これは動作しますが、私はアプリをナビゲートするなどの問題があり、私は頭のタグにこのスタイルの複数のインスタンスを取得しています：ここで

<style>...</style> 
<style>...</style> 

は、子コンポーネントのコードです：

import {Component, Output, EventEmitter} from '@angular/core'; 
import {ViewEncapsulation} from '@angular/core'; 

@Component({ 
    selector: '', 
    templateUrl:'app/home.component.html', 
    styles: [` 
       .hero-unit { 
        background:url('/app/assets/images/hero-01.png'); 
        width:100%; 
        height:540px; 
        background-size: cover; 
        background-repeat: no-repeat; 
        background-position: 50% 50%; 
       } 
      `], 

    encapsulation: ViewEncapsulation.None 
}) 
export class HomeComponent { 

} 

もう1つはもう一方を上書きします。これは、前のページに移動してエフェクトが動作しなくなるまで有効です。私の質問は、スタイル・プロパティーを削除してから、そのコンポーネントから離れてナビゲートするときに再挿入する方法です。あるいは、ルートに基づいて背景イメージをスワップするためのより良い方法があります。 Angular 2でこのような簡単な作業を達成するための最良の方法を見つけるのは苦労しています。ありがとう。

Answer 1

ルータデータまたはサービスを使用できます。

ルータソリューション

ルートデータに画像のURLを入れてください：

{ path:  'child1', 
    component: Child1Component, 
    data:  { imageUrl: '/app/assets/images/hero-02.png' } 
} 

親コンポーネントは、その後、ルーティングイベントをサブスクライブURLを抽出し、スタイルプロパティを更新することができます。

import {Component, Renderer, ElementRef} from '@angular/core'; 
import {Router, ActivatedRoute, NavigationEnd} from '@angular/router'; 

@Component({ 
    template: `<section> 
    UserComponent content here, if any. 
    <nav> 
     <a [routerLink]="['./']">Activity</a> 
     <a [routerLink]="['profile']">Profile</a> 
     - child routes 
    </nav> 
    <div class="child-view"> 
     <router-outlet></router-outlet> 
    </div> 
    <section>` 
}) 
export class UserComponent { 
    constructor(private router: Router, private route: ActivatedRoute, 
    private renderer:Renderer, private elref:ElementRef) {} 
    ngOnInit() { 
    this.router.events 
     .filter(event => event instanceof NavigationEnd) 
     .subscribe(_ => { 
      let childRouteSnapshot = this.route.firstChild.snapshot; 
      let url = childRouteSnapshot.data.imageUrl; 
      this.renderer.setElementStyle(this.elref.nativeElement.childNodes[0], 
      'background-image', 'url(' + url + ')'); 
     }) 
    } 
} 

ここでは動作しますPlunker。 （plunker内のコードの一部は、RC5に変換する唯一の半分の方法であることに注意してください。上記のコードは、すべてのRC5である。）

私はelrefがng-componentではなく<section>に設定したので、私の例ではchildNodes[0]を使用する必要がありました。

サービス・ソリューション

共有サービスを使用してください。クックブックセクションParent and children communicate via a serviceを参照してください。子コンポーネントは、親コンポーネントがサブスクライブしているオブザーバブル/サブジェクトにイベント（つまり、URLイメージ文字列）をパブリッシュします。