Menu
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 [email protected] and [email protected] and [email protected] are installed.
FWIW, here's a screenshot of the logs...
880
Linking Routes in HTMLTo add links to one of the routes, use the routerLink directive in HTML. This directive accepts an array. The first parameter is the name of the route, and the second parameter is the parameters that you want to pass with the route.
Href is the basic attribute provided by Html to navigate through pages which reloads the page on click. routerLink is the attribute provided by angular to navigate to different components without reloading the page.
Yes it can be attached to div tag, your route is probably wrong try add / in front of route.
In Angular, RouterLink is a directive for navigating to a different route declaratively. Router. navigate and Router. navigateByURL are two methods available to the Router class to navigate imperatively in your component classes.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With