1

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

AppRouter（主/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 ），我有以下 RouterLink：person/:idpeople

<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 中。

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

谢谢。

4

2 回答 2

4

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

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

                  ^^
于 2017-11-16T11:42:03.100 回答
0

必须在[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'}}
于 2017-11-14T01:30:46.617 回答