如何在Angular 2中正确地共享组件之间的服务数据

Question

我想要创建一个服务来从.json文件获取数据一次并将其共享给多个订户。但现在我的解决方案从.json文件获取数据的请求数量等于我的服务的一些子数据。

getconfig.service.ts

import {Injectable} from 'angular2/core'; 
 
import {Http, Response} from "angular2/http"; 
 

 
@Injectable() 
 
export class ConfigService { 
 
    config: any; 
 
    http: Http; 
 

 
    constructor(http: Http) { 
 
     this.http = http; 
 
     console.log('Inside service'); 
 
     this.config = this.http.get('/config.json'); 
 
    } 
 

 
}

robotui.component.ts

... 
 
import {ConnectionService} from '../services/connection.service'; 
 

 
@Component({ 
 
    ... 
 
    providers: [HTTP_PROVIDERS, ConfigService, ConnectionService] 
 
    ... 
 
}) 
 

 
constructor(private _configService: ConfigService) { 
 
    this._configService.config.subscribe((observer) => { 
 
    console.log('Subscribe in RobotUI component', JSON.parse(observer._body)); 
 
    }); 
 
}

actual.photo.component.ts

import {Component} from 'angular2/core'; 
 
import {ConfigService} from '../services/getconfig.service'; 
 

 
@Component({ 
 
    ... 
 
    providers: [ConfigService] 
 
}) 
 

 
export class ActualPhotoComponent { 
 

 
    constructor(private _configService: ConfigService) { 
 
    this._configService.config.subscribe((observer) => { 
 
     console.log('Subscribe in ActualPhoto component', JSON.parse(observer._body)); 
 
    }); 
 
    } 
 

 
}

，当我在我的控制台运行它，我看到：

因此，有获取每个subscibers请求。我想要一个解决方案，当我只有一次config.json文件，将这些信息保存在一个服务中，并与多个subscibers共享。

Answer 1

这是因为

@Component({ 
    ... 
    providers: [ConfigService] //<--- this creates service instance per component 
}) 

---

要控制器/组件之间共享数据，仅创建一个实例，你必须注入你的服务为bootstrap function。

import {ConfigService } from './path to service'; 

bootstrap('AppCompoent',[configService]) //<----Inject here it will create a single instance only 

认购部分，

robotui.component.ts

... 
import {ConfigService} from '../services/getconfig.service'; //<----- Note this line here.... 
import {ConnectionService} from '../services/connection.service'; 

@Component({ 
    ... 
    ... // No providers needed anymore 
    ... 
}) 

constructor(private _configService: ConfigService) { 
    this._configService.config.subscribe((observer) => { 
    console.log('Subscribe in RobotUI component', JSON.parse(observer._body)); 
    }); 
} 

actual.photo.component.ts

import {Component} from 'angular2/core'; 
import {ConfigService} from '../services/getconfig.service'; 

@Component({ 
    ... 
    ... // No providers needed anymore... 
}) 

export class ActualPhotoComponent { 

    constructor(private _configService: ConfigService) { 
    this._configService.config.subscribe((observer) => { 
     console.log('Subscribe in ActualPhoto component', JSON.parse(observer._body)); 
    }); 
    } 

} 

这是你应该什么做。