在嵌套使用redirectTo (Using redirectTo in a nested 2019-11-04 22:08发布 站内文章 / 前沿技术 41 0 0

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

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:

需要与重定向属性添加另一条路径测试队列。

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到前缀父路径和去除./在孩子航线

（ 用于重新定向角文档 ）

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 （这似乎并不只适用于懒人路线）

修改stackblitz

但解决办法，如果直接重定向客场/task-queue从父工程太

文章来源: Using redirectTo in a nested