我有一个带有多个模块的 angular 应用程序,每个模块定义了一些路由。
应用程序(基本模块)使用这个 AppRoutingModule:
const routes: Routes = [
{path: 'user', loadChildren: 'app/user/user.module#UserModule'},
{path: 'exchange', loadChildren: 'app/exchange/exchange.module#ExchangeModule'},
{path: 'home', component: HomeComponent},
{path: '', redirectTo: '/home', pathMatch: 'full'},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
用户模块路由器:
@NgModule({
imports: [RouterModule.forChild(
[{
path: '', component: UserComponent,
children: [
{path: '', component: UserProfileComponent, canActivate: [AuthGuardService]},
{path: 'login', component: UserLoginComponent},
{path: 'register', component: UserRegisterComponent},
{path: 'confirm/:confirmcode', component: UserConfirmMailComponent},
{path: 'logout', component: UserLogoutComponent}
]
}]
)],
exports: [RouterModule]
})
export class UserRoutingModule {
}
交换模块路由器:
@NgModule({
imports: [RouterModule.forChild(
[{
path: '', component: ExchangeComponent,
children: [
{path: '', component: ExchangeListComponent},
{path: ':exchange-name', component: ExchangeDetailComponent},
{path: ':exchange-name/:baseCode', component: ExchangeSelectionComponent},
{path: ':exchange-name/:baseCode/:targetCode', component: ExchangePairComponent},
]
}]
)],
exports: [RouterModule]
})
export class ExchangeRoutingModule {
}
我现在可以按预期使用路由http://localhost:4200/exchange/Sample/Base
访问ExchangeSelectionComponent
组件。
但是当我导航到http://localhost:4200/user/confirm/
并意外错过添加所需的参数时confirmcode
,而不是 Invalid-Route-Error 我匹配到与ExchangeSelectionComponent
上面相同的-route 。此外,当我尝试打开时,http://localhost:4200/thispagedoesnotexist
我会ExchangeDetailComponent
使用exchange-name = thispagedoesnotexist
.
似乎下面的所有内容/exchange/
也与基本 root 匹配/
。
为什么会这样,我该如何避免这种行为?我认为在内部路由中定义的每个路由routeChildren
只会在访问相应的父路由时被延迟加载,直到那时甚至没有被触及。
我使用 Angular 5.2。提前感谢您的任何意见。
我猜测 ExchangeModule 是在 app.module 中导入的,因此正在解析它的路由定义而不是延迟加载的路由定义。
path: '', component: ExchangeComponent
确保模块是延迟加载的而不是在 app.module 中导入的,这可以通过快速检查 app.module 文件或检查网络选项卡并在访问应该延迟加载的路由时查找新加载的块来确认,如果一个新的块没有被加载,那么你的模块已经被导入到 app.module 并且没有被延迟加载。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句