通过 routerLink 定位命名插座会添加无关的“/”

Question

我正在尝试通过路由在我的应用程序中启动模式。除了在 URL 中添加了一个额外的斜线以防止它解析之外，一切似乎都有效。 Url 应该看起来像这样（如果我手动输入它就可以工作）...

/accounts(modal:accounts/1/edit)

但我得到的是这个（注意基础 url 和出口目标之间的斜线）...

/accounts/(modal:accounts/1/edit)

基本标签已设置...

<head>
  <meta charset="utf-8">
  <title>myApp</title>
  <base href="/">
  ...
</head>

这是我的路由配置（帐户-routing.module.ts）

const ACCOUNT_ROUTES: Routes = [
  {
    path: 'accounts',
    component: AccountsIndexComponent
  },{
    path: 'accounts/new',
    component: AccountsNewComponent
  },{
    path: 'accounts/:id',
    component: AccountsShowComponent
  },{
    path: 'accounts/:id/edit',
    component: AccountsEditComponent,
    outlet: 'modal'
  }
];

和出口(app.component.html)

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

而 link...

<a [routerLink]="[{ outlets: { modal: ['accounts', account.id, 'edit'] } }]">Edit</a>

我错过了什么？该项目是使用 angular-cli@1.0.0-beta.26 创建的，安装了 angular@2.4.6 和 angular-router@3.4.6。

FWIW，这是日志的屏幕截图...

Answer 1

解决方法是在 link 上定义一个空的相对路径。感谢@unitario 为我指明了正确的方向！

<a [routerLink]="['', { outlets: { modal: ['accounts', account.id, 'edit'] } }]">Edit</a>

通过 routerLink 定位命名插座会添加无关的“/”

Targeting named outlet via routerLink adds extraneous "/"

angular

modal-dialog

angular2-routing

router

outlet