json - 如何在 Angular2 中与其动态交互的 2 个组件中注入(inject)相同的服务

Question

我有一个应用程序，它包括通过从示例集合中选择一个图像来更改背景图像的操作，这个想法是编写一个服务来解析图像的 json 列表链接并为背景定义一个。所以我有一个组件 1:用于查看选择的图像组件 2:用于加载图像 + 一个图像选择的 Action 服务:用于更改所选图像

问题是服务设置了默认情况下在服务本身强加的第一张图像，当我在服务解析的图像之间选择一个图像并在组件 2 中查看时无法更改它，特别是这个 lign在组件 2 的 View 中:

<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;
    }

最后是服务要解析的 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]);