Angular 2 - маршрутизація підмодуля та вкладений <router-outlet>

Я шукаю рішення з Angular 2 для сценарію, описаного нижче:

У цьому сценарії верхня панель навігації містить посилання для завантаження підмодулів, а навігаційна панель - посилання для оновлення вмісту підмодуля.

URL-адреси мають відображатись як:

• / home => завантажує домашню сторінку в розетку основного компонентного маршрутизатора
• / submodule => завантажує підмодуль в розетку основного компонентного маршрутизатора і за замовчуванням повинен відображати домашню сторінку та підвкладку панелі підмодуля
• / submodule / feature => завантажує функцію всередині розетки маршрутизатора субмодуля

Модуль програми (і компонент програми) містить верхню панель навігації для переходу до різних підмодулів, і шаблон компонента програми може виглядати так

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

Але тут є складність. Мені потрібно, щоб мої підмодулі мали подібний макет із панеллю навігації другого рівня та власною розеткою маршрутизатора для завантаження власних компонентів.

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

Я спробував усі варіанти і шукав скрізь, але не міг знайти рішення, щоб мати шаблон за замовчуванням (наприклад, компонент програми) у підмодулі з розеткою маршрутизатора, а також завантажити вміст підмодуля у внутрішню розетку маршрутизатора, не втрачаючи піднав. .

Буду вдячний за будь-який внесок чи ідеї

Сторінка html буде виглядати так.

Головна сторінка

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

Сторінка підмодуля

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

після натискання навігації на верхній панелі навігації головний вихід маршруту буде прокладати маршрут відповідно.

при натисканні на панель навігації розетка маршрутизатора [sub] прокладе маршрут відповідно.

HTML чудово, фокус буде при написанні app.routing

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
  }
]

Сподіваюся, це допоможе вам.

Детальніше https://angular.io/guide/router

Використання:

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

Повний приклад:

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

Ви повинні згадати назву розетки в маршрутах, згадайте назву розетки вашого маршрутизатора в маршруті, як це "outlet: '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"},
      ]
   },
];