Question

因此，作为一个最近的项目，我正在尝试建立一个博客系统。我要处理的下一部分是管理部分，主要是编辑帖子。

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

/博客-这是主页所在的位置。
/ blog /：slug -这是您访问各个帖子的方式
/ blog / admin -这是您访问管理部分的方式

这是我正在使用的当前路线：

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

如前所述，我现在要设置的是“编辑帖子”部分。我正在考虑设置类似的内容：

/ blog /：slug / edit

因此，实际的网址可能类似于：/ blog / post-title-thing-im-talking-about / edit

这样我就可以轻松地在每个帖子的末尾附加/ 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}

];

我的猜测是，它实际上是在寻找类似“ / blog / blog-post-title / edit”的URL模式，而不是仅仅匹配/ blog / *** / edit。由于我尝试了几种不同的路由设置及其返回的错误，如：

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

是否可以设置这种动态路由？

Answer 1

在您配置事物的方式中，编辑组件将显示在PostComponent的模板内，该模板内的router-outlet指令旁边。你不要那样您希望它是一个单独的页面。所以应该就是

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

设置具有动态第一部分的Angular子路线

1 个答案: