Angular 2 路由器 - 更改刚刚命名的插座

Question

我有一个主路由器插座和一个命名插座。主插座包含一个子路由器插座。当我尝试更改 just 命名出口时，它失败了 - 我被路由到默认主路由并且命名出口没有任何反应。

AppRouter (primary/AppModule):

{ path: 'dashboard', component: DashboardComponent },
{ path: 'person/:id', component: PersonProfileComponent }
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: '**', redirectTo: 'dashboard', pathMatch: 'full' }

子路由器（独立模块）：

{
        path: 'person/:id',
        component: PersonProfileComponent,
        children: [
            { path: 'people', component: PersonPeopleComponent }, 
            {
                path:'person-edit',
                component: PersonEditPanelComponent,
                outlet:'taskPane'
            },
}

从 PersonPeopleComponent（#/person/8/people 的 url - 匹配主插座中的 person/:id 和子插座中的 people），我有以下 RouterLink：

<a [routerLink]="[{outlets:{taskPane : ['person-edit']} }]">Click Me!</a>

其中 taskPane 是指定的插座。

我希望发生的是 PersonEditPanelComponent 将显示在 taskPane 命名插座中，而 PersonProfileComponent 和 PersonPeopleComponent 将在小学和儿童网点。相反，我看到的是 Dashboard 路由（我的后备路由）被加载到主出口，而 taskPane 出口是空的。控制台没有记录错误。

我的 link 上的 href 最终变成了类似 #/person/8/(people//taskPane:person-edit) 的东西，它不起作用（我在路由器 link 上尝试了许多不同的排列，所以这是一个例子只有一个无效 URL）。 URL 需要是 #/person/8/people(taskPane:person-edit) 这确实有效（我手动测试过）但我不知道如何设置 RouterLink 来生成 URL.

我认为路由配置正确，因为URL在我硬编码时有效，这意味着问题出在RouterLink中。

关于我做错了什么的任何线索？

谢谢。

Answer 1

必须在 [routerLink] 指令中设置主插座的路径。将 Router 注入组件非常容易：

@Component({
  template: `<a [routerLink]="[router.url, {outlets: {taskPane: ['person-edit']} }]">Click Me!</a>`
})
export class YourComponent {
  constructor(public router: Router) {}
}

如果它仍然不起作用，那么我会尝试将命名插座的参数作为字符串传递给：

{outlets: {taskPane: 'person-edit'}}

Answer 2

知道了。为 routerLink 的相关部分添加一个空字符串有效：

<a [routerLink]="['', {outlets: {taskPane: 'person-edit'} }]">Click Me!</a>

^^

Angular 2 路由器 - 更改刚刚命名的插座

Angular 2 Router - change just named outlet

angular2-routing

angular

angular-auxiliary-routes