我目前拥有看起来像这样的应用程序组件:
<app-navigation></app-navigation>
<router-outlet></router-outlet>
和路线:
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} },
];
id参数是我使用http服务加载的资源的ID,它对所有子页面均有效。这意味着,我不需要每次用户从Page1导航到Page2时都加载它。
现在的问题是,在哪里加载资源?
当前正在执行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;
});
}
}
我想最好不要在每个页面(Page1,Page2)等中执行此操作。
我想考虑在router-outlet
的“ ItemContainerCompoent”中可以有另一个router-outlet
,但是当用户在内部router-outlet
的页面之间导航时,我该如何突出显示链接? / p>
答案 0 :(得分:2)
您需要的是子条路线:
const appRoutes: Routes = [
{ path: 'items', component: ListComponent },
{ path: 'items/:id', component: DetailsComponent
children: [
{ path: 'page1', component: Page1Component },
{ path: 'page2', component: Page2Component },
{ path: 'anotherpage', component AnotherPageComponent} }
]
}
];
这部分文档对您很有用:Milestone 4: Crisis center feature