Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
676 views
in Technique[技术] by (71.8m points)

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...