I have a problem with lazy loaded module data re-fetch. onSameUrlNavigation simply doesn't work
I have a separate routing module for a lazy loaded feature and maybe I couldn't integrate onSameUrlNavigation properly
project structure:
app/
app.component.ts
app.module.ts
app-routing.module.ts
someFeature/
someFeature.module.ts
someFeature-routes.module.ts
someFeature.component.ts
app-routing module code:
export const routes: Routes = [{
{
path: 'myfeature',
loadChildren: () => import('./someFeature/someFeature.module').then(m => m.someFeatureModule),
canActivate: [AuthGuard],
runGuardsAndResolvers: 'always',
}}]
@NgModule({
imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
exports: [RouterModule],
})
export class AppRoutingModule {
}
lazy loaded routing module:
const routes: Routes = [
{
path: '',
component: someFeatureComponent,
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
component code:
ngOnInit(): void {
this.unsubscribe$ = new Subject<void>();
this.route
.queryParams.pipe(
takeUntil(this.unsubscribe$),
map(p => {
this.loading = true;
if (p.page && p.limit) {
this.page = p.page;
this.limit = p.limit;
}
return {
page: this.page,
limit: this.limit,
};
}),
flatMap((f) => this.myService.getData(f)),
tap(() => this.loading = false),
)
.subscribe((payload) => {
this.data = payload.data;
})
;
}
this is the problematic section (in the component code)
reload(): void {
this.router.navigate(['someFeature'], {queryParams: {page: this.page, limit: this.limit}});
}
refetchDataOnClick(){
this.reload();
}
data is fetched on the first request (So I decided that there's no problem with module import or anything like that), but re-fetch isn't happening as I can see there are no additional requests on the API.
I tried adding and removing "runGuardsAndResolvers" ,someFeature-routes module, but with no success. I also tried adding onSameUrlNavigation to someFeature-routes module, but forChild can accept only one parameter
Thanks to the user fridoo's comment I found a solution
instead of reloading the component I just call the service which loads the data again
this.loading = true;
this.myService.getData({page: this.page, limit: this.limit})
.pipe(
takeUntil(this.unsubscribe$),
finalize(() => this.loading = false))
.subscribe((payload) => {
this.data = payload.data;
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.