CODEWITHSUNDEEP
angularnestedangular-routing
rdabrowski
rdabrowski

Reputation: 404

Nested router-outlet in angular 5.2.0

I have problem with nesting routes in Angular when it comes to lot of childs.

Here is my RouteConfig:

{
    path: '',
    canActivate: [Auth],
    component: LayoutComponent,
    children: [
    {
        path: 'administrator',
        component: AdministratorComponent,
        canActivate: [Role],
        children: [
        {
            path: "users",
            component: UsersComponent,
            children: [
            {path: ':page', component: UsersComponent},
            {
                path: 'preview',
                children: [
                    {path: ':id', component: UsersComponent}
                ]
            },
            {path: 'add', component: UsersEditComponent},
            {
                path: 'edit',
                children: [
                   {path: ':id', component: UsersEditComponent}
                ]
            }
            ]
        },
        {path: "params", component: ParamsComponent}
    ]
}

}

The problem shows on routes /administrator/users/add /administrator/users/edit/{id} /administrator/users/preview/{id} because of nested router-outlet

My app.component.html

<router-outlet (deactivate)="onDeactivate()"></router-outlet>

My AdministratorComponent

<div class="col s12">
    <div class="row tab-content">
        <router-outlet></router-outlet>
    </div>
</div>

In the AdministratorComponent I dynamicly load UsersComponent or ParamsComponent, I am interested in UsersComponent in this case, it looks like this:

<div class="users-table">    
<!--some code--!>
    <a [routerLink]="['/administrator', 'users', 'add']" routerLinkActive="active">Add</a>
</div>

Now what I want to archive is to make this <a> element to work in router-outlet from AdministratorComponent, is that possible? If not, how I should refactor that? I need some fresh idea, because I got stuck. I hope that my question is clear to understand.

Thanks for any help.

Upvotes: 1

Views: 1736

Answers (1)

rdabrowski
rdabrowski

Reputation: 404

OK, I found out the solution for this example:

  1. Remove component: UsersComponent from /administrator/users path
  2. Add {path: '', component: UsersComponent} as a child to /administrator/users

  3. Correct order of the routes is:

    a. ''
    b. 'add'
    c. 'preview'
    d. ':page'

Now routing on nested router-outlet works as I expected.

Upvotes: 1

Related Questions