Angular 2 - Submodule routing and nested

Question

I\'m looking for a solution with Angular 2 for the scenario explained below:

In this scenario, the top-nav contains links to load submodules and sub-nav has

Answer 1

Use:

RouterModule.forChild()
...

...
[routerLink]="[{ outlets: { sub: [subRouteName] } }]"

Full example:

HTML

  
    {{ tab.label }}
  



  

app.module.ts

imports: [
...
    RouterModule.forChild([
      {
        path: 'registers',
        component: RegistersComponent,
        children: [
          {path: 'vehicles', component: VehiclesComponent, outlet: 'sub'},
          {path: 'drivers', component: DriversComponent, outlet: 'sub'},
          {path: 'bases', component: BasesComponent, outlet: 'sub'},
          {path: 'lines', component: LinesComponent, outlet: 'sub'},
          {path: 'users', component: UsersComponent, outlet: 'sub'},
          {path: 'config', component: ConfigComponent, outlet: 'sub'},
          {path: 'companies', component: CompaniesComponent, outlet: 'sub'}
        ],
        canActivate: [AuthGuard]
      }
    ]),
...