Как ввести ту же услугу в 2 компонента, которые динамически взаимодействуют с ним в Angular2

Question

У меня есть приложение, которое включает в себя действие изменения изображения фона, выбирая изображение из коллекции примеров, идея состоит в том, чтобы написать услугу который анализирует json-список ссылок изображений и определяет один для фона. поэтому у меня есть компонент 1: для просмотра seleted изображений качестве компонента 2: для загрузки изображений + действие одного выбора изображения службу: для изменения изображения выбранного

проблема, что служба установить первое изображение, которое наложен по умолчанию в самой услуге и не может изменить его, когда я сделать действие выбора одного betwen изображений разбираемых сервисом и просмотрены в компоненте 2, а именно это lign с точки зрения компонента 2:

<img class="contentSizes" src={{BackService.imageLink}}> 

компонент 1:

@Component({ 
    selector: 'content', 
    templateUrl: 'content.component.html', 
    styleUrls: ['content.component.css'], 
    providers:[BackgroundService], 
    directives: [FORM_DIRECTIVES], 

}) 
export class ContentComponent { 

    constructor(public BackService : BackgroundService) 
    { 

    } 
} 

и шаблон:

<div> 
    <img class="contentSizes" src={{BackService.imageLink}}> 
</div> 

Компонент 2: (загрузка изображений по обслуживанию и выбора одного, чтобы сделать его в качестве фона

@Component({ 
    selector: 'housepic', 
    templateUrl: '.housepic.component.html', 
    styleUrls: ['housepic.component.css'], 
    providers:[BackgroundService], 
    viewProviders:[HTTP_PROVIDERS], 
    directives:[ContentComponent] 

}) 
export class HousepicComponent implements OnInit, OnDestroy{ 

    images_list; 



    constructor(
     public BackService : BackgroundService) 
    { 
     this.BackService = BackService; 


    } 



    onSelectImage(lien){ 
     console.log("housepic"+lien.toString()); 
     this.BackService.imageChange(lien); 
    } 

    ngOnInit(){ 
     this.BackService.getjson().subscribe(people => this.images_list = people); 
    } 

    ngOnDestroy(){ 

    } 

} 

и шаблона:

<div class="accordian"> 
    <ul> 
     <li *ngFor="#img of images_list"> 
      <div class="image_title"> 
       <a href="#">Exemple</a> 
      </div> 

      <a (click)="onSelectImage(img.image)" > 
       <img src="{{img.image}}" style="height: 320px ; width: 640px"/> 
      </a> 
     </li> 
    </ul> 
</div> 

и услуги:

import {Injectable,EventEmitter,Output} from 'angular2/core'; 
import {Http} from "angular2/http"; 
import 'rxjs/add/operator/map'; 



@Injectable() 
export class BackgroundService{ 



    constructor (public http : Http){ 

     this.http= http; 
     /*this.imageLink = '../../../dev/backgrounds/int4.png';*/ 
     console.log("lien initial"+ this.getImage()); 
     this.imageChange('../../../dev/backgrounds/int4.png'); 

    } 

    /*background variable link*/ 
    public _imageLink :string 


    get 
    set imageLink(value:string) { 
     console.log("nnnnn"+value) 
     this._imageLink = value; 
    } 


    /*parsing des images temoins */ 
    getjson(){ 
     return this.http.get('dev/JsonData/maisonsImages.json') 
      .map(res => res.json()) 
    } 



    /*action de changement de l image */ 

    public imageChange (lien:string):void{ 

     this._imageLink=lien; 


     console.log("imageLink = "+this._imageLink) 
     console.log("le lien recu = "+lien); 



    } 

    /*recuperer l image selectionne */ 
    getImage(){ 
     console.log("yyyy"+this._imageLink) 
     return this._imageLink; 
    } 

imageLink():string { 
     return this._imageLink; 
    } 

    set imageLink(value:string) { 
     console.log("nnnnn"+value) 
     this._imageLink = value; 
    } 


    /*parsing des images temoins */ 
    getjson(){ 
     return this.http.get('dev/JsonData/maisonsImages.json') 
      .map(res => res.json()) 
    } 



    /*action de changement de l image */ 

    public imageChange (lien:string):void{ 

     this._imageLink=lien; 


     console.log("imageLink = "+this._imageLink) 
     console.log("le lien recu = "+lien); 



    } 

    /*recuperer l image selectionne */ 
    getImage(){ 
     console.log("yyyy"+this._imageLink) 
     return this._imageLink; 
    } 

и Finaly файл JSON данных (ссылки изображений), которые будут анализироваться службой:

[ 
    { "id": 1, "image": "../../../dev/backgrounds/int0.jpg" }, 
    { "id": 2, "image": "../../../dev/backgrounds/int1.jpg" }, 
    { "id": 3, "image": "../../../dev/backgrounds/int2.jpg" }, 
    { "id": 4, "image": "../../../dev/backgrounds/int3.jpg" }, 
    { "id": 5, "image": "../../../dev/backgrounds/int4.png" } 

] 

также мой файл boot.ts:

import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from "./app.component"; 
import {ROUTER_PROVIDERS} from "angular2/router"; 
import {MATERIAL_PROVIDERS} from 'ng2-material/all'; 
import {BackgroundService} from "./services/background/BackgroundService"; 
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router'; 
import {HTTP_PROVIDERS} from "angular2/http"; 
import {provide} from "angular2/core"; 



bootstrap(AppComponent,[ROUTER_PROVIDERS,HTTP_PROVIDERS,BackgroundService,MATERIAL_PROVIDERS, 
    provide(LocationStrategy, { useClass: HashLocationStrategy }) 
]); 

Answer 1

Не добавить услугу поставщикам каждого компонента

providers:[BackgroundService], 

Таким образом, каждый компонент получит свой экземпляр.
Вместо этого добавьте его только для общего родителя. Чтобы поделиться им со всей заявкой, добавьте его в AppComponent (корневой компонент) или bootstrap(AppComponent, [BackgroundService]);