Angular 6 routing - setting children route component based on parent route parameters

Question

I have the following routing configuration in my Angular 6 project.

    path: 'chart/:feature',
    component: ChartStateComponent,
    canActivateChild: [ChartGuardService],
    children: [
        {
            path: ':id',
            redirectTo: '/chart/:feature/:id/profile',
            pathMatch: 'full'
        },
        {   path: ':id/:tab',
            component: TestOneComponent,
            pathMatch: 'full'
        }
    ]

feature is param to parent path and it can 4 different values like one, two, three and four. Now depending on this param, I need to set the component for children path.

For example, if feature is set one, then set TestOneComponent as children component.

How can i achieve this?

DeborahK · Accepted Answer · 2019-02-14 17:34:37Z

0

You could try this:

path: 'chart',
component: ChartStateComponent,
canActivateChild: [ChartGuardService],
children: [
    {
        path: 'one/:id',
        redirectTo: 'one/:id/profile',
        pathMatch: 'full'
    },
    {   path: 'one/:id/:tab',
        component: TestOneComponent
    },
    {   path: 'two/:id/:tab',
        component: TestTwoComponent
    },
    ...
],

Alternatively, you could build a route guard to handle more complex routing. See this question for more information: Angular2 conditional routing

UPDATE

I'm not sure how you could add a conditional based on the parameter ... but you can add a conditional based on a global variable.

In a "Globals" file:

 export class Globals {
    public static ISADMIN: boolean = false;
 }

In your module route definitions

  {
    path: 'products/:id',
    component: Globals.ISADMIN ?  ProductAdminComponent : ProductDetailComponent
  },

edited Feb 14, 2019 at 17:34

answered Feb 12, 2019 at 18:18

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sameer K Over a year ago

Thank you for the reply. Though I have solved the issue using Guards. But still curious know is there way to set the components based on parameter?

DeborahK Over a year ago

Not that I know of. But you can use a global variable. See my updated answer.

Sameer K Over a year ago

Yeah, global variables did worked for me. Thank you.

Collectives™ on Stack Overflow

Angular 6 routing - setting children route component based on parent route parameters

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related