What I am trying to accomplish is to call external API only once per app initialization.
I have a simple service,
@Injectable()
export class XService {
url = "http://api.example.com"
constructor(private _http:Http) {
}
callAnAPI(){
console.log('made an external request");
return this._http.get(url)
.map(res=>res.json());
}
}
and two components, the main appComponent
@Component({
selector: 'my-app',
template: `
<div>
Test
</div>
`
})
export class AppComponent {
isLoading = true;
results = [];
constructor(private _service: XService){
}
ngOnInit(){
Observable.forkJoin(
this._service.callAnAPI()
// some more services here
)
.subscribe(
res => {
this.results = res[0];
},
null,
() => {this.isLoading = false}
);
}
}
and another component used with a route
@Component({
template: `
<div>
I want to use the service with this component.
</div>
`
})
export class SecondComponent {
constructor(private _service: XService){
}
}
the service is initialized and Angular hits server on the initialization of the AppComponent. I want to Use XService with SecondComponent too, whenever I try to call the service again from the SecondComponent, (via _service._service.callAnAPI()) Angular hits the external API. I want to minimize the external hits.
How do I obtain the data made by the AppComponent on initialization than calling again the service again in SecondComponent