Nested Routes with Root Router Outlet in Angular 4

user_2638412 0
Viewed 967

I'm using nested routes in my Angular 4 application. They are structured as follows:

routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent,
        children: [
           path: 'grandchild',
           component: GrandchildComponent
        ]
      }
    ]
  }
]

I have a single router outlet defined in app.component.html.

When I navigate to the 'parent/child' route, this setup works fine, with the router outlet loading the ChildComponent.

However, when I navigate to the 'parent/child/grandchild' route, the GrandchildComponent doesn't load.

This does seem to work with a secondary router outlet in the child component, but is there any way that I could get the GrandchildComponent to load on the root router outlet, without the need for a secondary one?

nested-routes angular4-router angular
1 Answers

I would say no.

If you want to load the grandchild in the root outlet, then it's not a grandchild, it's a grandparent ! When you have nested routes, you need to have nested outlets.

Admin1
Related