Угловой модуль (маршрутизация) с префиксом URL - PullRequest
Новая
       8

Угловой модуль (маршрутизация) с префиксом URL

0 голосов
/ 01 сентября 2018

У меня есть следующая вложенность маршрутизатора в модуле SampleModule 

const routes: Routes = [
  {
    path: 'samples',
    component: SampleListComponent,
    children: [
      {
        path: ':id',
        component: SampleDetailsComponent,
        children: [
         {
        ...

Тогда в моем компоненте приложения у меня есть следующее определение: 

<div class="container">
  <div class="row">
    <div class="col-2">
      <dashboard></dashboard>
    </div>
    <div class="col-10">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

В моей панели инструментов есть пункты меню, которые используют ссылку маршрутизатора для перехода к конкретному модулю маршрутизатора (например, образцы)

URL-адрес root / samples, который продолжает root / samples / 3 ...

Это все работает действительно хорошо, и компоненты из этого модуля отображаются правильно.

Проблема заключается в том, что я пытаюсь предоставить страницу документации, которая разделена на темы, разные префиксы URL ...

Итак, URL, который я хотел бы иметь при навигации, следующий:

root / модули-документация / примеры ...

Если я перехожу к модулю примеров в компоненте документации, он снова переходит к корню, и мой компонент документации теряется. Можно ли как-то обернуть этот модуль, ничего не меняя в модуле?

1 Ответ

0 голосов
/ 02 сентября 2018

Мне удалось это исправить.

DocumentationModule 

    const routes: Routes = [
  {
    path: 'documentation-modules', component: LandingPageComponent,
    children: [
      ...SAMPLE_ROUTES
    ]
  },
];

SAMPLE_ROUTES: 

export const SAMPLE_ROUTES: Routes = [
  {
    path: 'samples',
    component: SampleListComponent,
    children: [
      {
        path: ':id',
        component: SampleDetailsComponent,
        children: [
          {
            path: 'depth3',
            component: SampleDepth3Component,
            children: [
              {
                path: 'depth4',
                component: SampleDepth4Component,
                children: [
                  {
                    path: 'depth5',
                    component: SampleDepth5Component,
                  }
                ]
              }
            ]
          }
        ]
      }

    ]
  }
];
...