代码之家  ›  专栏  ›  技术社区  ›  Reactgular

如何重定向到子路由并在Angular中再次重定向?

  •  1
  • Reactgular  · 技术社区  · 8 年前

    我正在开发一个没有根的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 .

    事实上 /相册/视图 告诉我第一个孩子的路线正在使用。

    我知道我犯了一个简单的错误,但我看不出来。

    1 回复  |  直到 8 年前
        1
  •  1
  •   daisura99    8 年前

    我认为重定向只适用于同一级别的路由。

    你可以试试这个

    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}
    ];
    
    推荐文章