路由到深层嵌套组件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

Answer 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']);