0

This is my plunk:
https://plnkr.co/edit/SzaI1ffiCxFk7BE3Ke8o?p=preview

As you can see, my app gets data from an HTTP service. These data are shared between the components of an angular router.

The question is, I definitely don't want every component to load data from the http service everytime it is initialized (inside OnNgInit method).
My app should instead load data from http service just at the beginning (and that's why I put the service PlanService.loadData() inside OnNgInit method of AppComponent), and save them inside a local instance of the Object Plan. Then every component should get those data (in their initialization phase) from a service PlanService.getData(). I tried to do this, but without success. Is there a different approach?

B. Ciervo
  • 135
  • 4
  • 16
  • http://stackoverflow.com/questions/36271899/what-is-the-correct-way-to-share-the-result-of-an-angular-2-http-network-call-in – Günter Zöchbauer Nov 23 '16 at 16:55
  • Thanks for your suggest. The Plunker example seems not working ;( ... – B. Ciervo Nov 23 '16 at 17:20
  • Thanks for the note. I'll have a look when I have more time. Probably just the boilerplate code (NgModule, ...). I'm pretty sure the core of the solution can be used unchanged. – Günter Zöchbauer Nov 23 '16 at 17:22
  • Ok, I'll try and let you know. – B. Ciervo Nov 24 '16 at 10:05
  • @GünterZöchbauer I tried but it seems to call the http service everytime the component is initialized... it seems not storing data. Here my updated plunk https://plnkr.co/edit/SzaI1ffiCxFk7BE3Ke8o?p=preview – B. Ciervo Nov 24 '16 at 10:38
  • Did you provide the service on the component? In this case a new service instance will be created for each component. If you provide it in `@NgModule()` only a single instance of the service will be created. – Günter Zöchbauer Nov 24 '16 at 10:42
  • @GünterZöchbauer Ok, perfect, thanks a lot! I deleted the service inside the providers of the components and now it works, but... not like I'd want to. I'll explain better. When I modify data inside component form, I don't want the change to affect the other components, the change would affect data only inside the component until user click on "UPDATE" button. Is there a way to prevent this "binding"? Here is [my plunk](https://plnkr.co/edit/SzaI1ffiCxFk7BE3Ke8o?p=preview) – B. Ciervo Nov 24 '16 at 14:18
  • Not directly. You would need to assign a copy of the object (I found the `Plan` class in your Plunker for example) to a property and bind to this property instead. Then on "UPDATE" you go through the properties and update the orginal instance. I don't know a better way. – Günter Zöchbauer Nov 24 '16 at 14:25
  • Oh, I tried but without success... where should I have to assign it? I'm not so sure about the better way to do it... – B. Ciervo Nov 24 '16 at 14:47
  • Instead of `this.plan = plan;` use `this.plan = Object.assign({}, plan);` – Günter Zöchbauer Nov 24 '16 at 14:49
  • 1
    Ooooh thanks a lot @GünterZöchbauer, you finally solved my issue. Thanks!!! – B. Ciervo Nov 24 '16 at 16:56
  • You're welcome. Glad to hear you could make it work :) – Günter Zöchbauer Nov 24 '16 at 16:57

0 Answers0