3

在我的应用程序中希望有一个默认路由到我的子路由，如果给定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}}]
},

假设他们的代码是功能性的并且是一种好的方法，我不明白为什么我会因为在无组件路由中有一个出口而得到这个错误。我确实删除了“outlet：'browsePanel'”并使错误消失，但在提供“experiments/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”导航到 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 的路线所做的事情有什么问题。

4

1 回答 1

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

我希望这可以帮助你 ：）

于 2018-02-19T17:30:05.487 回答