Angular - Ленивая загрузка модуля внутри модуля с дочерним маршрутом

Question

У меня есть угловое приложение, где мой основной модуль маршрутизации лениво правильно загружает модули.Однако теперь у меня есть дополнительное требование для отображения другого компонента / модуля внутри одного из лениво загруженных модулей.

Когда я сейчас перехожу к users/id (эта часть работает правильно), я хочу представление вкладки в HTMLгде я могу загрузить дополнительные модули в зависимости от того, какая вкладка нажата.Например, у меня может быть 3 кнопки: User Albums, User Favourites и User Stats.Когда я нажимаю на одну из них, я хочу, чтобы компонент отображался на той же странице, что и ребенок, используя <router-outlet></router-outlet>

Модуль маршрутизации приложения

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'login',                 loadChildren: '../app/login/login.module#LoginModule' },
  { path: 'users',                 loadChildren: '../app/users/users.module#UsersModule' },
  { path: 'users/:id',             loadChildren: '../app/user-detail/user-detail.module#UserDetailModule' },
  { path: '',                      loadChildren: '../app/login/login.module#LoginModule', pathMatch: 'full' },
  { path: '**',                    loadChildren: '../app/login/login.module#LoginModule', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

user-detail.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserDetailComponent } from './user-detail.component';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    component: UserDetailComponent,
    children: [
      {
        path: 'useralbums',
        loadChildren: '../user-albums/user-albums.module#UserAlbumsModule'
      },
    ]
  },
]


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
  ],
  declarations: [UserDetailComponent]
})
export class UserDetailModule { }

user-detail.html

<h1>User Detail</h1>
<a [routerLink]="['/users', user_id, 'useralbums']">User albums</a>
<a>Link Two</a>
<a>Link Three</a>
<router-outlet></router-outlet>

Answer 1

Поскольку вы хотите, чтобы новый компонент загружался в случае изменения дочернего маршрута, и загружали его как часть лениво загруженного модуля, вы можете добавить <router-outlet></router-outlet> к шаблону user-detail.component.html.

Примерно так:

<h1>User Detail</h1>
<ul class="nav">
  <li class="nav-item">
    <a [routerLink]="['/users', user_id, 'user-albums']">User Albums</a>
  </li>
  <li class="nav-item">
    <a [routerLink]="['/users', user_id, 'user-favourites']">User Favourites</a>
  </li>
  <li class="nav-item">
    <a [routerLink]="['/users', user_id, 'user-stats']">User Stats</a>
  </li>
</ul>
<router-outlet></router-outlet>

Теперь в модуле этого файла определите конфигурацию маршрута для ленивой загрузки соответствующих модулей:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { UserDetailComponent } from './user-detail.component';

const routes: Routes = [
  { 
    path: '', 
    component: UserDetailComponent,
    children: [
      {
        path: 'user-albums',
        loadChildren: './user-albums/user-albums.module#UserAlbumsModule'
      },
      {
        path: 'user-favourites',
        loadChildren: './user-favourites/user-favourites.module#UserFavouritesModule'
      },
      {
        path: 'user-stats',
        loadChildren: './user-stats/user-stats.module#UserStatsModule'
      },
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [UserDetailComponent]
})
export class UserDetailModule { }

И затем определитеЛенивые модули с их конфигурацией, подобной этой:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { UserAlbumsComponent } from './user-albums.component';

const routes: Routes = [
  { path: '**', component: UserAlbumsComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [UserAlbumsComponent]
})
export class UserAlbumsModule { }

PS: Поскольку существует много компонентов, я бы посоветовал вам внимательно взглянуть на решение stackblitz, чтобы понять, как осуществляется маршрутизация

---

Вот вам рабочий образец StackBlitz для вашей ссылки.