Где загрузить ресурс с маршрутов, таких как / 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 - это идентификатор ресурса, который я загружаю с использованием службы http иэто верно для всех подстраниц.Это означает, что мне не нужно загружать его каждый раз, когда пользователь переходит со страницы 1 на страницу 2.

Теперь вопрос в том, где загрузить ресурс?

в настоящее времясделать это 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) и т. д.* в "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} }
    ]
  }
];

Этот фрагмент документации будет вам полезен: Этап 4: функция кризисного центра