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

Question

i当前有看起来像这样的应用程序组件：

<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服务加载，并且对所有子页面都是有效的。这意味着，我不需要每次用户从第1页到第2页进行加载。

现在的问题是在哪里加载资源？

当前执行详细信息：

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，但是当用户在Inner 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} }
    ]
  }
];

这部分文档对您有用：里程碑4：危机中心功能