Angular2: How to update converter dependent components?

Question

I have three components, each of which has its own resolver, which extracts data from another API. To do this, these components rely on a URL that is shared by the service.

I want that when this URL changes, each component is reloaded, that is, the transformers are reloaded.

I looked at some related SO questions, but no one mentions how to do this when using resolvers, cf: question 1 , question 2 , question 3

I can think of two ways:

The dirty way: force a component upgrade using router redirection and an empty component.

this.router.navigateByUrl('blank',true); this.router.navigateByUrl('home/(mapps:mobil//sw:simil//sf:sales)'); 

But that did not work. There is an update, but resolvers are not ... allowed.

Another way: use BehaviorSubject or ChangeDetectorRef. But then I do not know how to do this, given that detecting changes inside my components will not help me actually restart the recognizers.

I feel that this needs to be done through a router, because this is the one who knows about resolvers:

 const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent, children : [ { path: '', component: BlankComponent }, { path: 'simil', component: SwComponent, outlet: 'sw', resolve: { data: SwResolve } }, { path: 'sales', component: SalesComponent, outlet: 'sf', resolve: { data: SalesResolve } } ] }, { path: 'blank', component: BlankComponent } ]; 

Any clues on how to achieve this?

Edit: Here is the related plunkr

Edit Jun 17: No need for a workaround for an empty component. To update components, just call back the route:

this.router.navigateByUrl('home/(mapps:mobil//sw:simil//sf:sales)')

Answer 1

Routes cannot be updated at this time. This is probably possible to do with RouteReuseStrategy in Angular 2.3 .

Resolvers are reassessed when the route changes and can be observed from ActivatedRoute . They are not reevaluated if the route remains unchanged (the parameter does not change) and should be properly designed.

Changing the route asynchronously, a workaround is changing the route of the route:

 this.router.navigateByUrl('blank').then(() => { this.router.navigateByUrl('home/(mapps:mobil//sw:simil//sf:sales)'); })