Angular router with data re-resolve after update

Question

I have a component where the data is resolved by the router, like:

this.route.data.subscribe((data => { .....

Now we've added an http post transaction to this component that changes the state of the data that we resolved.

Is there a handy way to re-resolve the route data?

Adding some more code... some things were changed to protected the IP, so forgive any syntax errors.

In a sub-component, subscribing to the post:

this.myDataService.postUpdate(id, this.noteText).subscribe(
  data => {
    this.userMessageService.send('success', 'Update Complete', 'The update has been updated.');
  },
  error => this.userMessageService.send('error', 'Update Error', 'The update failed: ' + <any>error)
);

Then in "myDataService":

postUpdate(id: number, notes: string) {
    return this.http
        .post(this.url,
        { "Id": id, "Notes": notes }, options)
        .map((res) => {
            return {};
        })
        .catch((e) => {
            return Observable.throw(e.message || e);
        });
}

can you post your http post code? where did you add the http post? — LLai
The http post is in a service and it is called from a sub-component of the main component. The sub-component subscribes to the post. I'll add some more code to the OP if you think it will help. — Michael Witt
It sounds like you need something like ViewChild (learnangular2.com/viewChild) within your this.route.data.subscribe() in the main component, you can trigger the sub-components method to subscribe to the post. — LLai
@LLai, I could add that. But let's pretend the call to the post service is in the main component. I would still have the same question. How can I re-resolve the data after the post completes? — Michael Witt
hmm I guess I am confused by "re-resolve". Do you want to refire the first http request that is handled in the resolve? so resolve -> post -> resolve — LLai

LLai LLai · Accepted Answer · 2017-07-13T16:46:56

I would chain your observables together with flatMap.

// in your main.component
this.route.data.flatMap(res => { 
    return this.myDataService.postUpdate(id, this.noteText);
}) 
.flatMap(res => { 
    return this.myDataService.initialObservable(); // This is the same observable that you have in your resolve guard
} 
.subscribe(res => { 
    // called when 3 successive http request have finished 
});

Angular router with data re-resolve after update

1 Answers