The current structure of my app component is as follows:
<app-navigation></app-navigation>
<router-outlet></router-outlet>
with defined routes:
const appRoutes: Routes = [
{ path: 'items', component: ListComponent },
{ path: 'items/:id', component: DetailsComponent },
{ path: 'items/:id/page1', component: Page1Component },
{ path: 'items/:id/page2', component: Page2Component },
{ path: 'anotherpage', component AnotherPageComponent} },
];
Where the 'id' parameter serves as the identifier for a resource loaded using an HTTP service, and remains valid across all subpages. This eliminates the need to reload it every time a user navigates between subpages.
Now the dilemma arises, where should the resource be loaded?
Presently, I handle this in the DetailsComponent:
export class DetailsComponent {
isLoading = true;
constructor(
private backend: BackendService,
protected state: StateService,
private route: ActivatedRoute) {
this.route.params.pipe(
map(params => params['id']),
filter(id => this.state.currentItem != id),
distinct(),
tap(() => {
this.isLoading = true;
this.state.currentCase = null
}),
switchMap(id => backend.getItemById(id)),
tap(() => this.isLoading = false)
).subscribe(response => {
this.state.currentCase = response;
});
}
}
It may not be optimal to repeat this process in every subpage (Page1, Page2) etc...
An alternative I'm considering is to have another router-outlet in the "ItemContainerComponent" nested within the main router-outlet. However, this raises questions on how to highlight links in the navigation when the user navigates between pages in the inner router-outlet