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

實際照片組件

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

當我在控制台中運行它時，我看到：

因此，每個子域都有一個get請求。 我只需要一次獲取config.json文件，將此信息保存在服務中並與多個子服務共享時，就需要一個解決方案。

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

實際照片組件

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

}

這是您應該做的。