角度:与儿童路线的辅助路线路线

Question

我的应用中想要有一条通往我孩子路线的默认路由，如果给出了experiments/1，路由器将路由到experiments/1(browsePanel:overview)

我目前一直在使用此网站作为我的参考，它的示例几乎与我想要实现的范围相同，这是他们的代码：

{
    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}}]
},

假设它们的代码功能是功能，并且是一种很好的方法，我不明白为什么我会在无组件路线中遇到插座的错误。我确实删除了" Browsepanel'"，并使错误消失了，但是在提供"实验/1"

时，它不会向孩子路由。

如果我不能将插座放在我的重定向路径中，我该如何通往辅助路线？谢谢

update

使用@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]
    }

问题是"实验/：idlab"的路线。它似乎无法正确识别ID，如果我像这样的"/实验/1"导航到URL，则会导致此例外：

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'

当我导航到完整的"实验/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的路线所做的事情。

Answer 1

我也有同样的问题。我通过将 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}}
    ]
},

我希望这对您有帮助：）