Question

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

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的网址 - 与主要插座中的person/:id和子插座中的people匹配），我有以下RouterLink：

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

其中taskPane是指定的出口。

我期望发生的事情是PersonEditPanelComponent会显示在taskPane指定的插座中，而PersonProfileComponent和PersonPeopleComponent在主要设备中保持不变儿童商店。相反，我看到的是Dashboard路线（我的后备路线）被加载到主要插座并且taskPane插座为空。控制台中没有记录错误。

我的链接上的href最终会像#/person/8/(people//taskPane:person-edit)那样无效（我在路由器链接上尝试了很多不同的排列，这只是一个无效URL的例子）。 URL必须是#/person/8/people(taskPane:person-edit)才能正常工作（我手动测试）但我无法弄清楚如何设置RouterLink来生成该URL。

我认为路由配置正确，因为当我对其进行硬编码时，URL会起作用，这意味着问题出在RouterLink中。

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

感谢。

Answer 1

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

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

^^

Answer 2

必须在[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'}}

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

2 个答案: