Настройка угловых дочерних маршрутов с динамической первой частью

Question

Так что, как недавний проект, я пытаюсь настроить систему блогов.Следующая часть, которую я пытаюсь решить, это часть администратора, в основном редактирующая сообщения.

Моя идея состояла в том, чтобы маршруты работали так:

1. / blog - здесь находится домашняя страница.
2. / blog /: slug - это способ доступа к отдельным сообщениям
3. / blog / admin - это способ доступа к разделу администрирования

Вот текущие маршруты, которые я использую:

const routes: Routes = [
  {path: '', component: BlogHomeComponent},
  {path: 'admin', component: BlogAdminComponent},
  {
    path: ':slug', component: PostComponent,
    children: [
      {
        path: 'edit',
        component: PostEditComponent
      }
    ]
  },
];

Как было сказано ранее,сейчас я пытаюсь настроить раздел «Редактировать пост».Я думал о настройке что-то вроде:

/ blog /: slug / edit

Таким образом, фактический URL-адрес может выглядеть следующим образом: / blog / post-title-thing-im-talk-about / edit

Чтобы я мог легко добавить / отредактировать конец каждого сообщения и отредактировать его.

То, как он настроен в настоящее время, не работает.Он пытается загрузить страницу, а затем просто «выходит» из модуля блога и переходит к следующему («Проекты»).так что он маршрутизирует как:

/blog/projects

Вот маршрутизация для моего app.module:

const routes: Routes = [
  {
    path: 'blog',
    loadChildren: './blog/blog.module#BlogModule'
  },
  {
    path: 'projects',
    loadChildren: './projects/projects.module#ProjectsModule'
  },
  {path: 'contact', component: ContactComponent},
  {path: '', component: HomeComponent}

];

Я предполагаю, что он на самом деле ищет шаблон URL типа "/ blog /blog-post-title / edit "вместо простого соответствия / blog / *** / edit.Поскольку я пробовал несколько различных настроек маршрутизации и возвращенные ошибки, такие как:

"/ blog / blog-post-name-thing / edit" не существует в качестве текущего маршрута.

Есть ли способ настроить такую ​​динамическую маршрутизацию?

Answer 1

Как вы настраиваете вещи, компонент edit будет отображаться внутри шаблона PostComponent, рядом с директивой router-outlet внутри этого шаблона.Вы этого не хотите.Вы хотите, чтобы это была отдельная страница.Так что должно быть просто

const routes: Routes = [
  {path: '', component: BlogHomeComponent},
  {path: 'admin', component: BlogAdminComponent},
  {path: ':slug', component: PostComponent},
  {path: ':slug/edit', component: PostEditComponent}
];