CODEWITHSUNDEEP
angularangular2-routing
Hitesh Kumar
Hitesh Kumar

Reputation: 3698

Angular2: Multiple router-outlet in Child Componet

I am creating ng2 version of scotch.io 's angular-ui-router tutorial. I am able to achieve the basic navigation for home and about page. In home I am able to create navigation for children i.e. list and paragraph. I am stuck with about page. I am able to navigate to about page but I am not able to render the child component of about in their corresponding outlets. This is what I am doing:

about.component.html

<div class="jumbotron text-center">
    <h1>The About Page</h1>
    <p>This page demonstrates <span class="text-danger">multiple</span> and <span class="text-danger">named</span> views.</p>
</div>
<div class="row">
    <div class="col-sm-6">
        <router-outlet name="aboutOne"></router-outlet>
        <router-outlet name="aboutTwo"></router-outlet>
    </div>
</div>

about.routes.ts

export const aboutRoutes: Routes = [
    {
        path: 'about',
        component: AboutComponent,
        children: [
            {
                path: 'about',
                outlet: 'aboutOne',
                component: AboutOneComponent
            },
            {
                path: 'about',
                outlet: 'aboutTwo',
                component: AboutTwoComponent
            }
        ]
    }
];

about-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { aboutRoutes } from './about.routes';
@NgModule({
    imports: [RouterModule.forChild(aboutRoutes)],
    exports: [RouterModule]
})
export class AboutRoutingModule {

}

I don't know what I am missing. The about page is being rendered but it's not rendering it's child component also there's no error in the console. Here's the complete github repo.

Upvotes: 3

Views: 10353

Answers (3)

Arekhandia Harry
Arekhandia Harry

Reputation: 11

I found another solution to this problem. Although, this is more like a suggestion and more enlightenment to this problem. You can simply change the pathMath property to prefix as long as the routerOutlet is instantiated in the aboutUs component and the route has children.

NOTE: YOU MAY NOT NEED THE name ATTRIBUTE IF YOU HAVE JUST ONE router-outlet on your template.

Just set the pathMath property of the child route to prefix and it works when you hit the routes. Also, by the way. This is Angular 17. I'm pretty sure this is an old question, but router configuration in Angular hasn't changed since Angular2+

export const aboutRoutes: Routes = [
{
    path: 'about',
    component: AboutComponent,
    pathMatch: 'prefix',
    children: [
        {
            path: 'aboutOne',
            component: AboutOneComponent,
            outlet: 'aboutOne'
        },
        {
            path: 'aboutTwo',
            component: AboutTwoComponent,
            outlet: 'aboutTwo'
        }
    ]
}

];

Upvotes: 0

Hitesh Kumar
Hitesh Kumar

Reputation: 3698

After playing with named <router-outlet>, I figured out that. I was not giving the proper paths. Since both of my component should be rendered in their corresponding outlets when user lands into the about page. There's not relative url/path for both. They are default children of about. So I updated my path:'about' to path:''. And it started working. Hope this will be helpful to someone.

about.routes.ts

export const aboutRoutes: Routes = [
    {
        path: 'about',
        component: AboutComponent,
        children: [
            {
                path: '',
                outlet: 'aboutOne',
                component: AboutOneComponent,
                pathMatch: 'full'
            },
            {
                path: '',
                outlet: 'aboutTwo',
                component: AboutTwoComponent,
                pathMatch: 'full'
            }
        ]
    }
];

@Pradeep Thanks for highlighting the path issue.

Upvotes: 7

Pardeep Jain
Pardeep Jain

Reputation: 86730

Hey @hitesh most probably the error is in routing of about component, you have used same name of path in for both components as well as parent one please change this and try it like this

export const aboutRoutes: Routes = [
    {
        path: 'about',
        component: AboutComponent,
        children: [
            {
                path: 'aboutOne',
                outlet: 'aboutOne',
                component: AboutOneComponent
            },
            {
                path: 'aboutTwo',
                outlet: 'aboutTwo',
                component: AboutTwoComponent
            }
        ]
    }
];

Might be the case angular will try to load component on the basis of URL whihc is found about in every case so child component may not render in this case.

Upvotes: 3

Related Questions