McA*_*ome 6 javascript lazy-loading rxjs angular-routing angular
我有延迟加载模块数据重新获取的问题。onSameUrlNavigation 根本不起作用
我有一个单独的路由模块用于延迟加载功能,也许我无法正确集成 onSameUrlNavigation
项目结构:
app/
app.component.ts
app.module.ts
app-routing.module.ts
someFeature/
someFeature.module.ts
someFeature-routes.module.ts
someFeature.component.ts
Run Code Online (Sandbox Code Playgroud)
应用路由模块代码:
app/
app.component.ts
app.module.ts
app-routing.module.ts
someFeature/
someFeature.module.ts
someFeature-routes.module.ts
someFeature.component.ts
Run Code Online (Sandbox Code Playgroud)
懒加载路由模块:
const routes: Routes = [
{
path: '',
component: someFeatureComponent,
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
Run Code Online (Sandbox Code Playgroud)
组件代码:
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;
})
;
}
Run Code Online (Sandbox Code Playgroud)
这是有问题的部分(在组件代码中)
reload(): void {
this.router.navigate(['someFeature'], {queryParams: {page: this.page, limit: this.limit}});
}
refetchDataOnClick(){
this.reload();
}
Run Code Online (Sandbox Code Playgroud)
在第一个请求时获取数据(所以我决定模块导入或类似的东西没有问题),但是重新获取没有发生,因为我可以看到 API 上没有其他请求。
我尝试添加和删除“runGuardsAndResolvers”,someFeature-routes 模块,但没有成功。我也尝试将 onSameUrlNavigation 添加到 someFeature-routes 模块,但 forChild 只能接受一个参数
感谢用户frido的评论我找到了解决方案
我不重新加载组件,而是调用再次加载数据的服务
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;
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
1965 次 |
| 最近记录: |