如何在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)); 
    }); 
    } 

} 

這是你應該什麼做。