Angular 5 无组件路由与守卫未能命中重定向

Question

我正在尝试设置一个无组件路由以在 Angular 5 中应用路由保护，如下所示：

const routes: Routes = [
{path: '', runGuardsAndResolvers: 'always', canActivateChild:[AppRouteGuard], children: [
    { path: '', redirectTo: 'main', pathMatch: 'full' },
    { path: 'get-started', redirectTo: 'get-started', pathMatch: 'full'},

]}];

不幸的是，redirectTo 'main' 似乎没有被调用。但是，以下内容确实有效：

    const routes: Routes = [
{path: '', runGuardsAndResolvers: 'always', canActivateChild:[AppRouteGuard], children: [
    { path: '', component: MainComponent, pathMatch: 'full' },
    { path: 'get-started', redirectTo: 'get-started', pathMatch: 'full'},

]}];

有没有理由只有后者有效？有没有办法让 redirectTo: 'main' 按预期工作？

Answer 1

无组件路由“使用”URL 段而不实例化组件。这并不意味着没有与路由关联的组件。

在您的情况下，当您尝试重定向到 'main' 时。此 'main' 路由没有可用的路由信息，因此失败。您应该在重定向配置之后定义主路由，如下所示：

const routes: Routes = [
{path: '', runGuardsAndResolvers: 'always', canActivateChild:[AppRouteGuard], 
children: [
    { path: '', redirectTo: '/main', pathMatch: 'full' },
    { path: 'main', component: MainComponent },

]}];

无组件路由简单示例：

 [
  {
    path: 'team/:id',
    children: [
      {
        path: '',
        component: TeamListComponent
      },
      {
        path: '',
        component: TeamDetailsComponent,
        outlet: 'aux'
      }
    ]
  }
]

由于没有组件与 /team/:id 路由关联，路由器将合并其 params、data，并解析为 children。因此，TeamListComponent 和 TeamDetailsComponent 可以直接访问 id 参数，而无需通过父路由。

Angular 5 无组件路由与守卫未能命中重定向

Angular 5 component-less route with guard fails to hit redirect

angular

angular5