在嵌套中使用redirectTo <router-outlet>

Question

我有这个非常简单的路由器配置：

export const routes: Routes = [
  {
    path: '',
    component: MiddleComponent,
    pathMatch: 'full',
    children: [
      {
        path: '',
        redirectTo: './task-queue',
        pathMatch: 'full',
      },
      {
        path: 'task-queue',
        component: TestComponent,
      },
    ]
  },
];

演示： https : //stackblitz.com/edit/angular-a7sxdf?file=app%2Fapp.routing.ts

其中MiddleComponent的模板只是<router-outlet></router-outlet> 。

我希望在页面加载之后，我应该重定向到task-queue但不是。 我可以看到MiddleComponent已渲染，但TestComponent没有。

Answer 1

需要为测试队列添加另一个具有redirect属性的路径。

export const routes: Routes = [
  { path: '', redirectTo: '/task-queue' ,
    pathMatch: 'full'},
  { path: '', component: MiddleComponent,
    children: [
      { path: '', redirectTo: '/task-queue',pathMatch: 'full' },
      { path: 'task-queue', component: TestComponent }
    ] 
  }
];

演示版

Answer 2

您可以尝试将此pathMatch更改为父路由的前缀 ，并删除pathMatch的./

（ 用于重定向的Angular文档 ）

export const routes: Routes = [
  {
    path: '',
    component: MiddleComponent,
    pathMatch: 'prefix',
    children: [
      {
        path: '',
        redirectTo: 'task-queue',
        pathMatch: 'full',
      },
      {
        path: 'task-queue',
        component: TestComponent,
      },
    ]
  },
];

我通过阅读https://github.com/angular/angular/issues/14692获得了该解决方案（这似乎并不只适用于惰性路由）

修改后的堆叠闪电战

但是，如果直接从父级重定向到/task-queue的解决方案也有效