[英]Angular onSameUrlNavigation for a lazy loaded module
我有一个延迟加载模块数据重新获取的问题。 onSameUrlNavigation根本不起作用
我有一个单独的路由模块用于延迟加载功能,也许我无法正确集成onSameUrlNavigation
项目结构:
app/
app.component.ts
app.module.ts
app-routing.module.ts
someFeature/
someFeature.module.ts
someFeature-routes.module.ts
someFeature.component.ts
app-routing模块代码:
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 {
}
延迟加载路由模块:
const routes: Routes = [
{
path: '',
component: someFeatureComponent,
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
组件代码:
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;
})
;
}
这是有问题的部分(在组件代码中)
reload(): void {
this.router.navigate(['someFeature'], {queryParams: {page: this.page, limit: this.limit}});
}
refetchDataOnClick(){
this.reload();
}
数据是在第一个请求中获取的(所以我认为模块导入没有问题或类似的东西),但是没有发生重新获取,因为我可以看到API上没有其他请求。
我尝试添加和删除“runGuardsAndResolvers”,someFeature-routes模块,但没有成功。 我也尝试将onSameUrlNavigation添加到someFeature-routes模块,但forChild只能接受一个参数
感谢用户fridoo的评论我发现了一个解决方案
而不是重新加载组件我只是调用再次加载数据的服务
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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.