首页 文章

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

提问于
浏览 次
1

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

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 出口是空的 . 控制台中未记录任何错误 .

我的链接上的href最终会像 #/person/8/(people//taskPane:person-edit) 那样在路由器链接上尝试了许多不同的排列，因此这只是一个无效URL的示例 . URL必须是 #/person/8/people(taskPane:person-edit) ，它确实有效（我手动测试）但我无法弄清楚如何设置RouterLink来生成该URL .

我 think 路由配置正确，因为我在硬编码时URL工作，这意味着问题出在RouterLink中 .

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

谢谢 .

angular angular2-routing angular-auxiliary-routes

2 回答

  • 1

    得到它了 . 为routerLink的相对部分添加一个空字符串：

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

    ^^
    回复于
  • 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'}}
    回复于

相关问题