从 /page/:id/subpage 等路由加载资源的位置

Question

我目前的应用组件如下所示：

<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 参数是资源的 ID，我使用 http 服务加载，它对所有子页面都有效。这意味着，每次用户从 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 中的页面之间导航时，我将如何突出显示链接

Answer 1

你需要的是 child 路线：

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