I want to have an Enter-comp. as overview and basically two child-comp. For instance a login- and register-comp. Furthermore I want to manage this with multiple router outlets. But "of course" it doesnt work yet. It keeps me throwing: Error: Cannot match any routes. URL Segment: ',%20%7Boutlets:%20%7Blogin:%20%5B'login'%5D%7D%7D'
const routes: Routes = [
{path: 'stories', component: StoriesComponent},
{path: '', component: EnterOverviewComponent, children: [
{path: 'login', component: LoginComponent, outlet: 'login'},
{path: 'register', component: RegisterComponent, outlet: 'register'},
]}
];
<app-navbar></app-navbar>
<router-outlet></router-outlet>
<router-outlet name="login"></router-outlet>
<router-outlet name="register"></router-outlet>
Expecting the error here. I suspect, that I call the false route:
<ul class="navbar-nav ml-auto">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/, {outlets: {login: ['login']}}">Sign In</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/, {outlets: {register: ['register']}}">Register</a>
</li>
</ul>
Yes you can as said by @tomer above. i want to add some point to @tomer answer. firstly you need to provide name to the router-outlet where you want to load the second routing view in your view.
Yes! We can use multiple router-outlets in same template by configuring our routers and simply add the router-outlet name. You can see in the example.
There is no limit in angular but there are some best practices of using multiple place one in app.
Router-outlet in Angular works as a placeholder which is used to load the different components dynamically based on the activated component or current route state. Navigation can be done using router-outlet directive and the activated component will take place inside the router-outlet to load its content.
The problem is you are trying to send an Auxilliary route as a string. routerLink
evaluates the value on RHS as string. That is why you get to see strange characters in your route. To make this work, you need to try as follows -
<a [routerLink]="[{ outlets: { example: ['example1'] } }]">Example</a>
In your case
<a [routerLink]="[{ outlets: { register: ['register'] } }]">Example</a>//outletName:['route-path']
EDITED
Named Child outlet relative to ROOT route does not work and seems like a BUG
A workaround is mentioned in the comments section.
OR
You can change configs like below -
{
path: '', component: LoginComponent
},
{
path: 'example1', component: ExampleComponent, outlet: 'example'
}
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