компонент prview внутри модуля ленивая загрузка angular проблема

Question

Привет всем. Я создал приложение angular с отложенной загрузкой, и все работает хорошо, за исключением случаев, когда я пытаюсь открыть дочерние элементы или страницы внутри модулей, это перенаправляет меня на новую страницу, а не на основную, моя структура - главный модуль администратора с компонентом. затем пользовательский компонент и компонент настройки, моя маршрутизация администратора:

const routes: Routes = [
  { path : '' , component: AdminComponent},
  { path : 'User' , component: UserComponent},
  { path : 'Settings' , component: SettingsComponent},
  { path: '**', component: SystemErrorComponent }
];

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

Я добавил ссылки и маршрутизатор-выход внутри admin HTML page

<div class="container">
  <button routerLink="" class="btn btn-sm btn-link">admin</button>
  <button routerLink="Settings" class="btn btn-sm btn-link">Settings</button>
  <button routerLink="User" class="btn btn-sm btn-link">User</button>
  <hr />


  <router-outlet></router-outlet>
  </div>

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

const route: Routes = [

  { path: '', component: IndexComponent },
  { path: 'home', loadChildren: './home/home.module#HomeModule'},
  { path: 'admin', loadChildren: './admin/admin.module#AdminModule', canActivate: [AuthGuard]},
  { path: '**', component: PageNotFoundComponent },

];


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

когда я открываю область администратора, она открывается, но когда я нажимаю пользователя, она должна открываться внутри администратора, но она открывается вне администратора на новой странице

почему что случилось, как я и думал, ошибки не было

Answer 1

чтобы иметь возможность открывать компоненты "пользователь" и "настройки" внутри компонентов администратора, структура маршрутизации должна быть:

- Admin
--- User
--- Settings

Только так это возможно. Поэтому измените ваши маршруты AdminRoutingModule на:

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      { path: 'User', component: UserComponent },
      { path: 'Settings', component: SettingsComponent },
      { path: '', redirectTo: 'User', pathMatch: 'full' },
    ],
  },
  { path: '**', component: SystemErrorComponent }
];

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

Angular показывает только компоненты дочернего маршрута вместо <router-outlet>. Так что дайте ему знать правильную структуру маршрутов.

Надеюсь, это поможет.