如何重定向到子路由并在 Angular 中再次重定向？答案

【问题标题】：How to redirect to child route and redirect again in Angular?如何重定向到子路由并在 Angular 中再次重定向？
【发布时间】：2018-01-18 14:41:25
【问题描述】：

我正在开发一个没有根 / 路由的 Angular 5 应用程序。它应该重定向到延迟加载的孩子之一。每个子模块都有自己的从/child 到/child/view 的重定向（其中单词“child”是功能的名称）。

这个想法是根路由不知道默认路由在哪里。所以我可以重定向到首选的子模块，让那个孩子处理最终的重定向。所以应该有两个重定向。

这是我的根MainRoutes.ts 文件：

const routes: Routes = [
    {path: '', redirectTo: '/posts', pathMatch: 'full'},
    {
        path: '', component: MainComponent,
        children: [
            {path: 'albums', loadChildren: 'app/Albums/Albums#AlbumsModule'},
            {path: 'todos', loadChildren: 'app/Todos/Todos#TodosModule'},
            {path: 'posts', loadChildren: 'app/Posts/Posts#PostsModule'},
            {path: 'users', loadChildren: 'app/Users/Users#UsersModule'}
        ]
    },
    {path: '**', component: NotFoundComponent}
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class MainRoutesModule {
}

我上面的主要路由应该将/ 根路径重定向到/posts 子路由，但它会重定向到/albums。我不知道问题出在我的主路由定义还是我的子路由。

这是我的AlbumsRoutes.ts：

const routes: Routes = [
    {path: '', redirectTo: '/albums/view', pathMatch: 'full'},
    {path: 'view', component: ViewComponent}
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class AlbumsRoutesModule {
}

我还有TodosModule、PostsModule和UsersModule，它们和上面一样（除了名字不同）。

我是这样写的，因为我认为forChild 路由与它们的加载位置相关。

当我转到/ 时，URL 会重定向到/albums/view。似乎我的根目录中定义的重定向没有被使用。我需要它重定向到/posts/view。

它转到/albums/view 的事实告诉我正在使用第一个孩子的路线。

我知道我犯了一个简单的错误，但我看不到它。

【问题讨论】：

标签： angular typescript routes

【解决方案1】：

我认为 redirectTo 只适用于同一级别的路由。

你可以试试这个

const routes: Routes = [
  {path: '', redirectTo: '/posts', pathMatch: 'full'},
  {
    path: 'albums',
    component: MainComponent,
    loadChildren: 'app/Albums/Albums#AlbumsModule'
  },
  {
    path: 'posts',
    component: MainComponent,
    loadChildren: 'app/Posts/Posts#PostsModule'
  },
  ...
  {path: '**', component: NotFoundComponent}
];

【讨论】：