Angular2-命名路由器出口不';t导航到具有子路由的组件

Angular2-命名路由器出口不';t导航到具有子路由的组件,angular,angular2-routing,router-outlet,Angular,Angular2 Routing,Router Outlet,我有一个带有按钮的父组件,它的功能是在内部显示子组件。我正在使用命名路由器出口导航到该孩子。 我的尝试基于以下示例:(显示“撰写”的弹出窗口) 路由 ... { path: 'commissions-module/agents/:agentId/extra-commissions', component: ExtraCommissionsComponent, children: [{ path: 'regeneration-parameters',

我有一个带有按钮的父组件,它的功能是在内部显示子组件。我正在使用命名路由器出口导航到该孩子。 我的尝试基于以下示例:(显示“撰写”的弹出窗口)

路由

...
{
    path: 'commissions-module/agents/:agentId/extra-commissions',
    component: ExtraCommissionsComponent,
    children: [{
        path: 'regeneration-parameters',
        component: RegenerationParametersComponent,
        outlet: 'parameters'
    }]
}
...
displaySubcomponent() {
     this.router.navigate(['/', {outlets: {parameters: ['regeneration-parameters']}}])
}
正如您所看到的,父组件的路径包含变量段(agentId),所以我不能使用绝对路径路由。父组件和子组件都导入到模块文件中

HTML模板:

<button (click)="displaySubcomponent()">Show</button>
<router-outlet name="parameters"></router-outlet>
按下按钮后,页面以

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'regeneration-parameters'
当程序尝试导航到新url时,它将被创建为:

.../commissions-module/agents/1000555/extra-commissions(parameters:regeneration-parameters)
我需要的是获得以下url,因为再生参数是额外佣金的子项

.../commissions-module/agents/1000555/extra-commissions/(parameters:regeneration-parameters)
有趣的是,当我将第二个url插入地址栏时,它工作得很好,子组件显示在其父组件中-问题是router.navigate()函数创建的url中括号前缺少斜杠(“/”)

在这个例子中,同样的事情也能很好地工作,对于我发现的类似问题,其他解决方案也能很好地工作,是否有我看不到的隐藏的东西?
感谢

解决方案非常隐蔽,因为在使用单个路由器出口时,通常使用默认出口而不是命名出口。问题是,即使我们希望在应用程序中使用单个命名的插座,也需要一个默认(未命名)插座。模板的外观如下所示:

<button [routerLink]="['./', {outlets: {parameters: 'regeneration-parameters'}}]">
    Show
</button>

<router-outlet></router-outlet>
<router-outlet name="parameters"></router-outlet>

显示