web-dev-qa-db-fra.com

Le ciblage de la sortie nommée via routerLink ajoute un "/" superflu

J'essaie de lancer un modal dans mon application via le routage. Tout semble fonctionner sauf qu'une barre oblique supplémentaire est ajoutée à l'URL qui l'empêche de se résoudre. L'URL devrait ressembler à ceci (et cela fonctionne si je l'entre manuellement) ...

/accounts(modal:accounts/1/edit)

mais j'obtiens ceci à la place (notez la barre oblique entre l'url de base et la cible de sortie) ...

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

La balise de base est définie ...

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

Voici ma configuration de routage (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'
  }
];

Et sortie (app.component.html)

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

Et le lien ...

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

Qu'est-ce que je rate? Le projet a été créé à l'aide de [email protected] et [email protected] et [email protected] sont installés.

FWIW, voici une capture d'écran des journaux ...

failed routing attempt

angularmodal-dialogangular2-routingrouteroutlet
13
Brian

Le correctif consistait à définir un chemin relatif vide sur le lien. Merci à @unitario de m'avoir pointé dans la bonne direction!

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