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

Question

我目前有app组件，如下所示：

<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;
    });
  }
}

我想在每个页面（第1页，第2页）等都不是最好的主意。

我想我可以在router-outlet中的“ItemContainerCompoent”中拥有另一个router-outlet，但是当用户在内部router-outlet中的页面之间导航时，我将如何突出显示链接

Answer 1

您需要的是儿童路线：

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