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>

我的应用路由为

const路线：路线= [

  { 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>。因此，让他知道正确的路线结构。

希望有帮助。

模块内部的prview组件延迟加载角度问题

1 个答案: