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

问题描述

我想创建一个服务来从 .json 文件中获取一次数据并将其共享给多个订阅者.但是现在我的解决方案从 .json 文件中获取数据的请求数等于我的服务的订阅者数.

I want to create a service to get data from .json file once and share it to multiple subscribers. But now with my solution number of requests to get data from .json file equals to a number of a subscibers for my service.

getconfig.service.ts

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

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

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

}

当我在控制台中运行它时，我看到:

When i run it in my console i see:

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

So, there is get request for each subscibers. I want a solution when i get config.json file only once, save this info in a service and share it with multiple subscibers.

推荐答案

那是因为

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

要在控制器/组件之间共享数据并仅创建单个实例，您必须将服务注入 bootstrap 函数.

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

}

这是你应该做的.

这篇关于如何在 Angular 2 中正确地在组件之间共享服务数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！