Angular:路由到路线子

时间:2017-09-29 18:20:10

标签: angular navigation router router-outlet

在我的应用程序中想要一个到我的子路由的默认路由,如果给定experiments/1,路由器将路由到experiments/1(browsePanel:overview)

我目前一直使用这个site作为我的参考,它有一个与我想要实现的几乎相同的示例,这是他们的代码:

{
    path: 'team/:id',
    children: [
      { path: '', pathMatch: 'full', redirectTo: 'list' },
      { path: 'list', component: TeamListComponent,
        children: [
       { path: '', pathMatch: 'full', redirectTo: 'default' },
       { path: 'default', component: DefaultComponent }
        ]
      },
      { path: '', pathMatch: 'full', redirectTo: 'details' outlet: 'aux' }
    ]
  }

他们的代码比我想做的更复杂,但出于某种原因我收到了这个错误:"Invalid configuration of route 'experiments/:id/': a componentless route cannot have a named outlet set"

这是我的代码:

 { path: "experiments/:id", component: BrowseExperimentsComponent , children:[
        {path: '', redirectTo: 'overview', pathMatch: 'full', outlet:'browsePanel'},
        {path:'overview',component: BrowseOverviewComponent, outlet: 'browsePanel', resolve:{project:ProjectResolverService}},
        {path:':id', component: ExperimentDetail, outlet: 'browsePanel',resolve: {experiment: ExperimentResolverService}}]
},

假设他们的代码功能正常并且是一种很好的方法,我不明白为什么我在无组件路由中出现了这个错误。我确实删除了" outlet:' browsePanel'"并使错误消失,但在提供"实验/ 1"

时,它不会传给孩子。

如果我无法将插座插入我的重定向路径,我该如何路由到辅助路线?感谢

更新

在使用@Davide Perozzi方法后,它修复了重定向到路线的出口,没有id的实验。

{ path: "experiments/:idLab", component: BrowseExperimentsComponent , children:[ // for navigating via url
        {path: '', pathMatch: 'full', redirectTo: '/experiments/:idLab/(browsePanel:overview)' },
        {path:'overview',component: BrowseOverviewComponent, outlet: 'browsePanel', resolve:{project:ProjectResolverService}},
        {path:':id', component: ExperimentDetail, outlet: 'browsePanel',resolve: {experiment: ExperimentResolverService}}],
        canActivate: [SubRouteGuardService]
    },
    { path: "experiments", component: BrowseExperimentsComponent , children:[ 
        {path: '', pathMatch: 'full', redirectTo: '/experiments/(browsePanel:overview)' },
        {path:'overview',component: BrowseOverviewComponent, outlet: 'browsePanel', resolve:{project:ProjectResolverService}},
        {path:':id', component: ExperimentDetail, outlet: 'browsePanel',resolve: {experiment: ExperimentResolverService}}],
        canActivate: [SubRouteGuardService]
    }

问题在于路线' experiments /:idLab'。它似乎没有正确识别ID,如果我导航到这样的网址" / experiments / 1"它导致了这个例外:

Uncaught (in promise): Error: Cannot redirect to '/experiments/:id/(browsePanel:overview)'. Cannot find ':idLab'. Error: Cannot redirect to '/experiments/:idLab/(browsePanel:overview)'. Cannot find ':idLab'

当我导航到完全像' experiments / 1 /(browsePanel:23)'路由解析到正确的插座并且组件已加载,但是我得到了这个例外:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'experiments'
Error: Cannot match any routes. URL Segment: 'experiments'

两个例外情况是我确定出于同样的原因,带有id的父路线无法匹配。

我很难看到我正在使用带有id的路线做错了什么。

1 个答案:

答案 0 :(得分:2)

我遇到了同样的问题。我通过将 redirectTo 属性更改为子路径的绝对路径来实现它,如下所示(Angular 5.2.5 ):

{ 
    path: "experiments/:id", 
    component: BrowseExperimentsComponent, 
    children: [
        {path: '', pathMatch: 'full', redirectTo: '/experiments/:id/(browsePanel:overview)'},
        {path: 'overview', component: BrowseOverviewComponent, outlet: 'browsePanel', resolve:{project:ProjectResolverService}},
        {path:':id', component: ExperimentDetail, outlet: 'browsePanel', resolve: {experiment: ExperimentResolverService}}
    ]
},

我希望这可以帮助你:)