어떻게 중첩 된 구성 요소의 부모 배경 이미지를 각도 2로 변경할 수 있습니까?

Question

내 응용 프로그램의 각 경로에 대해 부모 배경 이미지를 변경해야합니다. 각 중첩 된 구성 요소에서 스타일 속성을 사용하여이를 달성하고 각 구성 요소의 ViewEncapsulation을 없음으로 설정하여 전체 효과를 얻습니다. 이것은 작동하지만 문제는 내가 응용 프로그램을 탐색, 나는 머리 태그에이 스타일의 여러 인스턴스를 얻고있다 :

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 { 

} 

: 여기

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

이 하위 구성 요소에 대한 코드입니다

One은 다른 페이지를 덮어 쓰기합니다. 이전 페이지로 돌아가서 효과가 작동을 멈추기 전까지는 괜찮습니다. 내 질문은 스타일 속성을 제거하고 해당 구성 요소에서 벗어나서 다시 탐색 할 때 스타일 속성을 다시 삽입하는 방법입니다. 또는 경로를 기반으로 배경 이미지를 바꿀 수있는 더 좋은 방법이 있습니까? 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 이미지 문자열)를 게시합니다.