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

Question

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

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

<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]);

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

How to inject the same service in 2 components which interact dynamically with it in Angular2

json

typescript

angular

angular2-directives

angular2-services