在嵌套的< router-outlet>中使用redirectTo [英] Using redirectTo in a nested <router-outlet>

问题描述

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

I have this very simple router config:

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没有渲染.

I'd expect that after page load I should be redirected to task-queue but I'm not. I can see the MiddleComponent is rendered but TestComponent isn't.

推荐答案

需要为测试队列添加具有重定向属性的另一条路径.

Need to add another path with redirect property for test-queue.

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 }
    ] 
  }
];

演示

这篇关于在嵌套的< router-outlet>中使用redirectTo的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！