Targeting named outlet via routerLink adds extrane

2020-06-01 06:48发布

I'm trying to launch a modal in my app via routing. Everything seems to work except that an extra slash is added to the URL that prevents it from resolving. The Url should look like this (and it works if I enter it manually)...

/accounts(modal:accounts/1/edit)

but i'm getting this instead (notice the slash between the base url and outlet target)...

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

The base tag is set...

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

Here's my routing config (accounts-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'
  }
];

And outlet (app.component.html)

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

And the link...

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

What am I missing? The project was created using angular-cli@1.0.0-beta.26 and angular@2.4.6 and angular-router@3.4.6 are installed.

FWIW, here's a screenshot of the logs...

failed routing attempt

1条回答
小情绪 Triste *
2楼-- · 2020-06-01 07:14

The fix was to define an empty relative path on the link. Thanks to @unitario for pointing me in the right direction!

<a [routerLink]="['', { outlets: { modal: ['accounts', account.id, 'edit'] } }]">Edit</a>
查看更多
登录 后发表回答