In my project, I have three separate components, each with its own resolver that retrieves data from distinct APIs. These components all depend on a shared URL provided by a service.
My goal is to ensure that when the URL changes, each component refreshes itself and restarts its respective resolvers.
I've researched similar questions on Stack Overflow but couldn't find specific guidance on how to achieve this when using resolvers: question 1, question 2, question 3
There seem to be two possible approaches:
The first method involves forcing the component to refresh by using a router redirect along with a blank component:
this.router.navigateByUrl('blank', true);
this.router.navigateByUrl('home/(mapps:mobil//sw:simil//sf:sales)');
However, this approach didn't fully meet my requirements as while there was a refresh, the resolvers remained unresolved.
The alternative option is to utilize a BehaviorSubject or ChangeDetectorRef, but I'm unsure of how to effectively implement it since only detecting changes within the components wouldn't necessarily trigger a restart of the resolvers.
My assumption is that the solution lies within the router mechanism, given its awareness of the resolvers, as illustrated in the route configuration snippet below:
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
// Components structure here...
];
If anyone has any insights or suggestions on how to tackle this issue, I would greatly appreciate it.
Edit: For reference, here is the related plunkr
Update June 17: It turns out that the workaround involving the blank component is no longer necessary. To refresh components, simply call back the route like so:
this.router.navigateByUrl('home/(mapps:mobil//sw:simil//sf:sales)')