所以我构建了一个Angular 5.2.0应用程序,我将其分为3个模块:
admin
路线时要加载的admin/**
模块,prefect
路线时加载的prefect/**
模块,authentication
模块,将在其他所有情况下加载。每个模块都有自己的路由。例如/admin/student/list
激活StudentListComponent
模块中定义的admin
。
现在,如果我转到/student/list
,而没有/admin
部分,则会加载相同的StudentListComponent
!这可以通过应用程序模块中定义的每个路径重现。
这显然不是理想的行为。特别是考虑到我有保护admin
和prefect
模块的路线防护装置,这使得它很容易绕过它们。
任何见解都表示赞赏。这是一个错误吗?或者我做错了什么?
这是我在app.module.ts
中的代码:
export const routes: Routes = [
{
path: 'admin',
loadChildren: 'app/modules/admin/admin.module#AdminModule',
canActivate: [AdminGuard]
},
{
path: 'prefect',
loadChildren: 'app/modules/prefect/prefect.module#PrefectModule',
canActivate: [PrefectGuard]
},
{
path: '',
loadChildren:
'app/modules/authentication/authentication.module#AuthenticationModule'
},
{
path: '**',
redirectTo: '/login'
}
];
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(routes),
AuthenticationModule,
PrefectModule,
AdminModule
],
providers: [AdminGuard, PrefectGuard],
bootstrap: [AppComponent]
})
export class AppModule {}
在admin.module.ts
:
const routes: Routes = [
{
path: '',
component: AdminComponent,
children: [
{
path: 'student',
children: [
{
path: 'list',
component: StudentListComponent
},
{
path: 'new',
component: StudentEditComponent
},
{
path: ':id',
component: StudentItemComponent
},
{
path: ':id/edit',
component: StudentEditComponent
}
]
}
]
}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(routes),
HttpClientModule,
FormsModule,
// Angular Material modules...
NavigationModule
],
providers: [StudentService],
declarations: [
AdminComponent,
StudentListComponent,
StudentItemComponent,
StudentEditComponent
]
})
export class AdminModule {}
在authentication.module.ts
:
const routes: Routes = [
{
path: '',
component: AuthenticationComponent,
children: [
{
path: 'login',
component: LoginComponent
},
{
path: 'reset',
component: ResetPasswordComponent
},
{
path: '',
redirectTo: '/login',
pathMatch: 'full'
}
]
}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(routes),
FormsModule,
// Angular Material modules...
],
providers: [AuthenticationService, AdminService, StudentService],
declarations: [
AuthenticationComponent,
LoginComponent,
ResetPasswordComponent
]
})
export class AuthenticationModule {}
答案 0 :(得分:1)
您在应用程序组件中导入了延迟加载的AdminModule:
imports: [
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(routes),
AuthenticationModule,
PrefectModule,
AdminModule
],
所以它实际上不是延迟加载的,而是在AppModule时加载的。所以AdminModule的路线都可以从' / admin'既然和根:' /'。 只需从AppModule的导入中删除它,它应该没问题。
我创建了一个小型回购,其中包含您尝试实现的实例here
希望有所帮助
答案 1 :(得分:0)
好的,我找到了解决方案:在app.module.ts
中,我导入了要素模块(AdminModule
等)并以某种方式产生了这种效果。
我删除了这些导入,问题解决了。