Angular2中如何在组件间正确共享服务数据
How to share service data between components correctly in Angular 2
我想创建一个服务来一次从 .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));
});
}
}
当我 运行 它在我的控制台中时,我看到:
因此,每个订阅者都有获取请求。当我只获得一次 config.json 文件时,我想要一个解决方案,将此信息保存在服务中并与多个订阅者共享。
那是因为
@Component({
...
providers: [ConfigService] //<--- this creates service instance per component
})
要在 controllers/components 之间共享数据并仅创建单个实例,您必须将您的服务注入 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));
});
}
}
这是你应该做的。
我想创建一个服务来一次从 .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));
});
}
}
当我 运行 它在我的控制台中时,我看到:
因此,每个订阅者都有获取请求。当我只获得一次 config.json 文件时,我想要一个解决方案,将此信息保存在服务中并与多个订阅者共享。
那是因为
@Component({
...
providers: [ConfigService] //<--- this creates service instance per component
})
要在 controllers/components 之间共享数据并仅创建单个实例,您必须将您的服务注入 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));
});
}
}
这是你应该做的。