Routing to deep nested component Angular 2+

Question

I have a route like this:

{
    path: 'parent',
    children: [
        {
            path: '',
            component: ParentComponent
        },
        {
            path: 'child1',
            children: [
                {
                    path: ':childID',
                    component: Child1Component
                }
            ]
        },
        {
            path: 'child2',
            children: [
                {
                    path: ':childID',
                    component: Child2Component
                }
            ]
        }
    ]
}

Now I want to call route for child1/childID. How do I route to it?

Right now I use this:

this._router.navigate(["child1", auction_ID]);

but it does not routes back to parent

"but it does not routes back to parent" If you want to go from child to parent, you should do something like this: this._router.navigate(["/parent"]): — developer033
– developer033, Commented Jun 22, 2017 at 0:06
If you want to navigate to the child route you'll need to `navigate(["parent", "child1", auction_ID]) — Z. Bagley
– Z. Bagley, Commented Jun 22, 2017 at 0:22

Vladimir Zdenek · Accepted Answer · 2017-06-22 08:00:59Z

1

You have to start at the "top" when you are navigating to a certain route. In your case, you want to go to parent -> child1 -> :childID so you have to pass all those parts in the navigate method.

Navigate to the Child

this._router.navigate(['parent', 'child1', auction_ID]);

Navigate to the Parent

this._router.navigate(['parent']);

answered Jun 22, 2017 at 8:00

Vladimir Zdenek

2,2901 gold badge20 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

Routing to deep nested component Angular 2+

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related