How to render a grandchild view into the same router-outlet as the first child?

问题

This is a follow up question to this: Angular 2 how does auxiliary routes work in 2.1.0?

I also tried looking at this but it doesn't really shed any light on the issue: How to render the child route into the router-outlet of the parent`s parent

If I have a parent route /admin which has a <router-outlet name="admin"></router-outlet> which looks like this:

const routes: Routes = [
  {
    path: '',
    component: AdminAreaComponent,
    canActivate: [AuthGuardService]
  },
  {
    path: 'login',
    loadChildren: '../pages/+login/login.module#LoginModule',
    outlet: 'admin'
  },
  {
    path: 'dashboard',
    loadChildren: '../pages/+dashboard/dashboard.module#DashboardModule',
    outlet: 'admin'
  }
];

I would access the dashboard via /admin(admin:dashboard), but now I need to render a child view of dashboard into the same router-outlet as the dashboard, which is admin. That view looks like this:

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent
  },
  {
    path: 'brands',
    loadChildren: '../pages/+brands/brands.module#BrandsModule',
    outlet: 'admin'
  }
];

However, when I try to access this route via /admin(admin:dashboard/brands) I get an error:

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'admin'

I'm guessing that I'm doing something wrong in the route config.

How can I fix this?

回答1:

Try with:

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    children: [
        {
            path: 'brands',
            loadChildren: '../pages/+brands/brands.module#BrandsModule'
        }
    ]
  }  
];

and /admin/(admin:dashboard//brands)

回答2:

This might sound crazy, but why not make dashboard a child module of admin?

来源：https://stackoverflow.com/questions/40131110/how-to-render-a-grandchild-view-into-the-same-router-outlet-as-the-first-child

标签

angular

angular2-routing