How to dynamically update the path of router children?

Question

SO already has the similar question. But I am trying to update only the path of the children.

This is my router file

import { Routes, RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import { ParentLoad } from './parent.component';
import { HomeCompnent } from './home.component';
import { AnatomyComponent } from './anatomy.component';
import { CellsComponent } from './cells.component';


export const routes: Routes = [
{
    path: '',
    component: ParentLoad,
    children: [
    { path: '', component: HomeCompnent, data: { title: 'Home' } },
    {
        path: 'anatomy', component: AnatomyComponent, data: { title: 'Anatomy' },
        // children: [
        // { path: 'cells', component: CellsComponent, data: { title: 'Cells' } },
        // ]
    }
    ]
}
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

anatomy.component.ts

ngOnInit(){
    this.router.resetConfig([
        { path: 'anatomy', component: AnatomyComponent },
    ]);
}

I am trying to add the children for anatomy path. But It is not working. I don't know where I am missing it.

score 0 · Answer 1 · answered Aug 22 '19 at 09:58

Try adding child routes as follows.

 { path: user-admin/:id', component: UserAdminComponent,
            children: [
              { path: 'final-exams', component: FinalExamsComponent},
//add child routes here
            ]
    },

Just an example. You can try like this in your code

How to dynamically update the path of router children?

1 Answers1