Angular2 - 名为 router-outlet 不导航到具有 child 路由的组件

Angular2 - named router-outlet doesn't navigate to component with child route

我有一个带按钮的parent组件,功能是在里面显示child组件。我正在使用命名 router-outlet 导航到 child。 我的尝试基于以下示例:https://github.com/vsavkin/router_mailapp(显示 'compose' 的弹出窗口)

路由

...
{
    path: 'commissions-module/agents/:agentId/extra-commissions',
    component: ExtraCommissionsComponent,
    children: [{
        path: 'regeneration-parameters',
        component: RegenerationParametersComponent,
        outlet: 'parameters'
    }]
}
...

如您所见,parent组件的路径包含可变段(agentId),因此我无法使用绝对路径路由。 parent 和 child 组件都导入到模块文件中。

HTML模板:

<button (click)="displaySubcomponent()">Show</button>
<router-outlet name="parameters"></router-outlet>

显示方法

displaySubcomponent() {
     this.router.navigate(['/', {outlets: {parameters: ['regeneration-parameters']}}])
}

按下按钮后,页面响应

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'regeneration-parameters'

当程序尝试导航到新的 url 时,它被创建为:

.../commissions-module/agents/1000555/extra-commissions(parameters:regeneration-parameters)

我需要的是关注 url 因为 regeneration-parameters[=52= 的 child ]:

.../commissions-module/agents/1000555/extra-commissions/(parameters:regeneration-parameters)

有趣的是,当我将第二个 url 插入地址栏时效果很好,子组件显示在其 parent 组件内 - 问题是 [ 之前缺少斜杠(“/”) =59=]hesis url 由 router.navigate() 函数创建。

示例中的相同内容效果很好,我发现的针对类似问题的其他解决方案也是如此,是否有隐藏的东西我看不到? 谢谢

解决方案很隐蔽,因为当使用单个路由器插座时,通常使用默认的而不是命名的。关键是,即使我们想在应用程序中使用单个命名插座,也需要有一个默认(未命名)插座。该模板看起来像:

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

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