Angular2 - 命名路由器出口不会导航到具有子路由的组件答案

【问题标题】：Angular2 - named router-outlet doesn't navigate to component with child routeAngular2 - 命名路由器出口不会导航到具有子路由的组件
【发布时间】：2017-07-19 14:30:24
【问题描述】：

我有一个带有按钮的父组件，其功能是在里面显示子组件。我正在使用命名路由器插座导航到孩子。我的尝试基于以下示例：https://github.com/vsavkin/router_mailapp（显示 'compose' 的弹出窗口）

路由

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

如您所见，父组件的路径包含可变段（agentId），因此我不能使用绝对路径路由。父组件和子组件都导入到模块文件中。

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)

我需要获取以下网址，因为 regeneration-parameters 是 extra-commissions 的子项：

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

有趣的是，当我将第二个 url 插入地址栏中时效果很好，子组件显示在其父组件内 - 问题是在由 router.navigate() 函数创建的 url 中的括号之前缺少斜杠（“/”） .

示例中的相同内容效果很好，对于我发现的类似问题的其他解决方案也是如此，是否有一些我看不到的隐藏内容？谢谢

【问题讨论】：

标签： angular angular2-routing router-outlet

【解决方案1】：

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

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

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

【讨论】：