routes - Angular: (Forwarding to) Routing with multiple variables

Question

I'm not even sure whether this is possible because I've never seen or done this before. I couldn't find anything alike in the documentation. However, basically what I want to achieve is something like this:

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

Even better would be if I could replace the / with - for the non-id variabeles. As such:

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

I tried the following:

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

However, the first path doesn't work. I get the following error:

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

Anyone that could help me out and knows wheter this is even possible?

question from:https://stackoverflow.com/questions/66052794/angular-forwarding-to-routing-with-multiple-variables

Answer 1

You can achieve this using the children of the routes property in angular routing. Something like this:

This is called the nested children concept in angular routing

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