使用动态第一部分设置 Angular 个子路由

Question

因此，作为最近的一个项目，我正在尝试设置一个博客系统。我要解决的下一部分是管理部分，主要是编辑 posts.

我的想法是让路线像这样工作：

/blog - 这是主页所在的位置。
/blog/:slug - 这就是您访问个人 posts
/blog/admin - 这就是您访问管理部分的方式

这是我目前使用的路线：

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

如前所述，我现在要设置的是 'edit post' 部分。我正在考虑设置如下内容：

/博客/:slug/edit

所以实际的 URL 可能看起来像：/blog/post-title-thing-im-talking-about/edit

这样我就可以轻松地将 /edit 添加到每个 post 的末尾并进行编辑。

当前设置的方式不起作用。它尝试加载页面，然后仅路由 'out of' 博客模块并转到我的下一个（项目）。这样它的路线就像：

/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}

];

我的猜测是它实际上是在寻找像“/blog/blog-post-title/edit”这样的 URL 模式，而不仅仅是匹配 /blog/***/edit。因为我尝试了几种不同的路由设置，所以返回的错误如下：

“/blog/blog-post-name-thing/edit”作为当前路线不存在。

有没有办法设置那种动态路由？

Answer 1

按照您配置事物的方式，编辑组件将显示在 PostComponent 的模板内，在此模板内的路由器出口指令旁边。你不想要那个。您希望它是一个单独的页面。所以它应该只是

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

使用动态第一部分设置 Angular 个子路由

Setting up Angular child routes with dynamic first part

typescript

angular2-routing

angular