1

I have a global service. in this global service, I'm making an important API call to get the user data. This user data API call is important to many pages in my website, and therefore need to be executed first of all. I placed this API call in my service constructor this way:

constructor(public router: Router,private http: Http) {
        if (this.getToken())
        this.getUserData().subscribe(() =>{});
    else
        this.LOADED = true;
    }

which works fine.

Now let's talk about a component. I have a component named WorldComponent which uses the info received from the this.getUserData() method which is executed in the service constructor, as shown above.

When I'm trying to use the data I receive from the service API call, I get an error that this data don't exists (because the API call hasn't finished yet when I call this component). Therefore I placed in my component OnInit() method the following code:

ngOnInit()
   {
       this.service.getUserData().subscribe(() => {    
            if (this.service.userData.fly)
                this.router.navigate(['fly']);
            if (this.service.userData.ride)
                this.router.navigate(['ride']);

            this.loaded = true;
        });
   }

When using the cove above, my component works great, but if you will notice - the API call will be executed **twice!*.

Is there any way to wait for the API call to load before using this component, of even better, any of the components in my app?

Befoer RC.5 I could *ngIf the router outlet and the router worked only when the data is received. Now I can't place *ngIf outside router outlet, and I need to find another solution.

TheUnreal
  • 23,434
  • 46
  • 157
  • 277
  • 2
    One of these might help in your case 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 Aug 31 '16 at 07:49
  • 1
    @GünterZöchbauer The solution you provided there is awesome, worked for me and the comments really helped to understand the way it is. Thank you! – TheUnreal Aug 31 '16 at 08:13
  • Glad to hear. I'll mark this question as duplicate then. – Günter Zöchbauer Aug 31 '16 at 08:14
  • @GünterZöchbauer Wait!! I just noticed with a problem in this solution in my case. Cache is not a solution for me since the data is not refreshing! The user data stays the same even though it's being updated.. the user can't see the changes happenning as he making actions in the app. My console shows `getData called` which means I already have the data, do nothing. – TheUnreal Aug 31 '16 at 08:15
  • Maybe you want to add a method to drop the cache so that the service actually makes the next request. If this doesn't help please add the code to your question that shows what you got so far and where you're stuck. – Günter Zöchbauer Aug 31 '16 at 08:20
  • The error message is about a `world` property (seems not to be related to your previous comment). Please show the code where you access the `world` property. – Günter Zöchbauer Aug 31 '16 at 08:34
  • It's not about that. When `this.service.getUserData().subscribe(() => { ` is executed in my world component OnInit(), all user data is gone. Although, when I click F5 when i'm already in my world component, the app works. when I access a page in my app and then trying to access the world component, I get this error and user data is gone. Anyway to your question, my `world` property is being accessed as part of my user data I get: `{{service.userData.zone.world.name}}` – TheUnreal Aug 31 '16 at 08:38
  • Perhaps `{{service.userData.zone?.world?.name}}` solves your problem. – Günter Zöchbauer Aug 31 '16 at 08:41
  • It doesn't. But adding the same lines I added in my service consturctor userData subscribtion: `this.service.userData = data.user; this.service.activities = this.service.userData.activities; this.service.nearby = this.service.userData.nearby;` solved it.. Is there any way to fix it without adding those 3 lines whenever I'm subscribing to this api call? I tried to add them in `} else if(response.status == 200) {` but the error appears – TheUnreal Aug 31 '16 at 08:53
  • Sorry, but that is too time consuming. I'd need to fully dive into your problem. I don't have that much time. – Günter Zöchbauer Aug 31 '16 at 08:57
  • 1
    Solved it by adding my `.do` back to the new method after `.map` with this lines. – TheUnreal Aug 31 '16 at 09:11

0 Answers0