Как вы можете изменить исходное фоновое изображение из вложенного компонента в Angular 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 { 

} 

Один переопределяет другое, что нормально, пока вы не попытаетесь вернуться к предыдущей странице, где эффект перестает работать. Мой вопрос в том, есть ли способ удалить свойство стиля, как только я уйду от этого компонента и повторно вставил его, когда вернусь обратно. Альтернативно, есть лучший способ поменять фоновое изображение на основе маршрута. Мне сложно найти лучший метод для достижения такой простой задачи в 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.)

мне пришлось использовать childNodes[0], потому что в моем примере elref был установлен в ng-component, а не <section>.

Сервис решение

Используйте общую службу. См. Раздел «Поваренная книга» Parent and children communicate via a service. Детские компоненты публикуют события (например, строки изображения URL) на наблюдаемом/субъекте, который подписывается родительским компонентом.