Angular2 路由器 - 具有重定向到默认子级的组件的父路由

Question

我有一个SecuredModule，当用户访问/secured路径时，它会动态加载(在我的app.routing.ts中)。

在此模块中，我有以下路由定义：

const APP_ROUTES: Routes = [
{ path: '', component: SecuredComponent, , children: [
{ path: 'application', loadChildren: 'app/application/application.module#ApplicationModule'}
]},
{ path: '**', pathMatch: 'full', redirectTo: 'application' }
];

由于此模块加载了loadChildren，因此示例中的''(默认)路由实际上是指'/secured'。在''路径中，我需要加载SecuredComponent因为那里有自定义布局和将显示此路由子项的<router-outlet>标签。

但是'/secured'不是用户登陆的有效路线，因为SecuredComponent只是一个占位符，所以我需要自动将他们重定向到'application'子路由。

问题是定义的重定向函数仅在我进入不存在的路由时才被调用，例如'secured/any-fake-route'

Answer 1

问题是{ path: '**', pathMatch: 'full', redirectTo: 'application' }定义位于最底部，因此当用户访问'/secured'时永远不会调用它''因为它是有效的路由并且首先匹配。

我按如下方式修复了此问题：

const APP_ROUTES: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'application' },
{ path: '', component: SecuredComponent, canActivate: [SecuredMiddlewareService], children: [
{ path: 'application', loadChildren: 'app/application/application.module#ApplicationModule'}
]},
{ path: '**', pathMatch: 'full', redirectTo: 'application' },
];

注意第一行。当用户访问'/secured'时，他们会自动重定向到'/secured/application'。因为'application'是''的子路线，所以他们都被叫了。

因此，使用此配置，以下所有示例都可以根据需要成功重定向到'/secured/application'：

• '/secured'
• '/secured/application'
• '/secured/any-fake-route'