Angular：（转发到）具有多个变量的路由

Question

我什至不确定这是否可行，因为我以前从未见过或做过。我在文档中找不到任何类似的东西。但是，基本上我想要实现的是这样的：

route1: /blog/author/1 ==> Redirects to route 2
route2: /blog/author/1/Jane_Doe ==> Redirects to route 3
route3: /blog/author/1/Jane_Doe/...

如果我可以将非 ID 变量的 / 替换为 -，那就更好了。因此：

route1: /blog/author/1 ==> Redirects to route 2
route2: /blog/author/1/Jane_Doe ==> Redirects to route 3
route3: /blog/author/1/Jane_Doe-...

我尝试了以下方法：

const routes: Routes = [
  {
    path: ":id",
    redirectTo: ":id/:fullname"
  },
  {
    canActivateChild: [MetaGuard],
    path: ":id/:fullname",
    component: DetailedAuthorItemComponent,
    resolve: {
      author: AuthorResolver,
      posts: AuthorPostsResolver,
    },
  },
];

但是，第一个路径不起作用。我收到以下错误：

ERROR Error: Uncaught (in promise): Error: Cannot redirect to ':id/:fullname'. Cannot find ':fullname'.

任何可以帮助我并知道这是否可能的人？

Answer 1

您可以使用角度路由中的 routes 属性的子项来实现此目的。像这样的：

这被称为角度路由中的嵌套子概念

const routes: Routes = [
{
  path: 'blog',
  component: Component1, // The route here would be /blog
  children: [
     {
        path: 'author',
        component: Component2, // Basically the path here would be /blog/author
        children: [
           {
              path: 'id',
              component: Component3, // Basically the path here would be /blog/author/id
           }
        ]
     }
  ]
}
]