Angular 2: enrutamiento de submódulo y <router-outlet> anidado

Estoy buscando una solución con Angular 2 para el escenario que se explica a continuación:

En este escenario, la navegación superior contiene enlaces para cargar submódulos y la navegación secundaria tiene enlaces para actualizar el contenido del submódulo.

Las URL deben mapear como:

• / home => carga la página de inicio en la salida del enrutador del componente principal
• / submodule => carga el submódulo en la salida del enrutador del componente principal y por defecto debería mostrar la página de inicio del submódulo y la barra de navegación secundaria
• / submodule / feature => carga la función dentro de la salida del enrutador del submódulo

El módulo de la aplicación (y el componente de la aplicación) contiene una barra de navegación superior para navegar a diferentes submódulos y la plantilla del componente de la aplicación podría verse así

<top-navbar></top-navbar>
<router-outlet></router-outlet>

Pero aquí está la complejidad. Necesito que mis submódulos tengan un diseño similar con una barra de navegación de segundo nivel y su propia salida de enrutador para cargar sus propios componentes.

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>

Probé todas las opciones y busqué en todas partes, pero no pude encontrar una solución para tener una plantilla predeterminada (como el componente de la aplicación) en el submódulo con la salida del enrutador y también cargar el contenido del submódulo en la salida del enrutador interno sin perder el sub-nav .

Agradecería cualquier aportación o idea.

La página html se verá así.

Pagina principal

<top-navbar></top-navbar>
<router-outlet></router-outlet>

Página del submódulo

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>

al hacer clic en navegación en la barra de navegación superior, la salida de la ruta principal se enrutará respectivamente.

al hacer clic en la barra de navegación secundaria, la salida del enrutador [sub] se enrutará respectivamente.

HTML está bien, el truco vendrá al escribir la aplicación.

app.routing.ts

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  { path: 'home',
    component: homeComponent,
    children: [
      {
        path: 'module1',
        component: module1Component,
        children: [
          {
            path: 'submodule11',
            component: submodule11Component,
          },
          {
            path: '',
            redirectTo: 'submodule11',
            pathMatch: 'full'
          }
        ]
      },
      {
        path: 'module2',
        component: module2omponent,
        children: [
          {
            path: 'submodule21',
            component: submodule21Component,
          },
          {
            path: '',
            redirectTo: 'submodule21',
            pathMatch: 'full'
          }
        ]
      }
    ]
  },
  {
    path: 'about',
    component: aboutComponent
  }
]

Espero que te ayude.

Más detalles https://angular.io/guide/router

Utilizar:

RouterModule.forChild()
...
<router-outlet name="sub"></router-outlet>
...
[routerLink]="[{ outlets: { sub: [subRouteName] } }]"

Ejemplo completo:

HTML

<div class="tabs tinyscroll">
  <button *ngFor="let tab of tabs"
  [routerLink]="[{ outlets: { sub: [tab.name] } }]"
  routerLinkActive="selected">
    <span>{{ tab.label }}</span>
  </button>
</div>

<section>
  <router-outlet name="sub"></router-outlet>
</section>

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]
      }
    ]),
...

tienes que mencionar el nombre de la salida en las rutas menciona el nombre de la salida de tu enrutador en la ruta como esta "salida: 'sub"

routes: Routes = [
  {path:'', redirectTo: 'login', pathMatch: 'full'},
  {
    path: 'login',
    component: LoginComponent,

  },
  { path: 'home',
    component: AppComponent,
      children: [
        {path: 'home/pdf',component: SideMenuPage,outlet:"sub" },
        {path:'home/addFileUp',component:SidePageAdd,outlet:"sub"},
      ]
   },
];