[英]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.