Angular 角度：路由到具有路由子级的辅助路由

在我的应用程序中，希望有一个到我的子路由的默认路由，如果给定

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

他们的代码比我试图做的更复杂，但由于某种原因，我得到了以下错误：

“路由“实验/：id/”的配置无效：无组件路由不能有命名的出口集”

这是我的密码：

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

问题在于路线“实验/：idLab”。它似乎无法正确识别id，如果我像“/experiments/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'

当我导航到“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的路线时出了什么问题

我也有同样的问题。我通过将redirectTo属性更改为子路由的绝对路径来实现它，如下所示（Angular5.2.5）：

---

我希望这对您有所帮助：）

有点晚了，但我遇到了同样的问题，无法找到解决方案。你找到办法了吗？遗憾的是，没有，仍然不确定如何重定向到插座。我发现了很多问题，但没有一个解决方案适合我，我正在使用最新的Angle版本。当前正在尝试使用保护手动重定向到激活路由中找到的第一个子路由。因此我认为此方法有效，但我在调试器中发现了此异常：

ERROR:Uncaught（in promise）：ERROR:Cannot redirect to'/experiments/：id/（browsePanel:overview）'。找不到“：id”。错误：无法重定向到“/experiments/：id/（browsePanel:overview）”。找不到“：id”

当我看到url类似于“/experiments/1”时，我也注意到，当我提供它解析到正确出口的完整路径时，除了发生异常外，其他一切似乎都正常。这句话的大意是“无法与‘实验’相媲美”

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