预览模块内的组件延迟加载角度问题

Question

大家好，我已经构建了一个带有延迟加载的角度应用程序，并且一切正常，除了当我尝试打开模块内的子页面或页面时，它会将我重定向到新页面而不是我的主要页面内 带有组件的管理主模块，然后是用户组件和设置组件，我的管理路由是

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

我在管理 HTML 页面中添加了链接和路由器出口

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

我的应用路由是

常量路由：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>。所以让他知道正确的路线结构。

希望对你有帮助。