Angular 13中的嵌套子路由

Question

I want to navigate nested child routes using children inside app-routing.ts file. But my components not get called.

code is as follows: app-routing.ts file

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { SubmitFeedbackComponent } from './submit-feedback/submit-feedback.component';
 import { MenuOptionsComponent } from './menu-options/menu-options.component';
 import { InteviewDetailsComponent } from './menu-options/inteview-details/inteview- 
 details.component';
 import { EditFeedbackComponent } from './menu-options/edit-feedback/edit-feedback.component';
 import { SkillListComponent } from './menu-options/skills/skill-list/skill-list.component';
 import { SkillAddComponent } from './menu-options/skills/skill-add/skill-add.component';
 import { SkillEditComponent } from './menu-options/skills/skill-edit/skill-edit.component';

 const routes: Routes = [
 {
 path: 'menu-list',
 component: MenuOptionsComponent,
 children: [

  {
    path: 'inteview-details',
    component: InteviewDetailsComponent,
    pathMatch: 'full'
  },
  {
    path: 'edit-feedback',
    component: EditFeedbackComponent,
  },

  {
    path: 'skill-list',
    component: SkillListComponent,
    children:[
      { path: 'skill-add', component: SkillAddComponent },
      { path: 'skill-edit', component: SkillEditComponent },
  
    ]
  }
 ]
   },
    ];

   @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
    })
   export class AppRoutingModule { }

Below is the folder structure

I'm hitting URL is like : http://localhost:4200/menu-list/skill-list/skill-add

As per above URL only up to skill list component is loading. skill-add is getting inside URL but on browser skill-add component is not loading. Also no any errors is there. Please let me know what I can do there.

Answer 1

I feel you're confused about router children. A router children is when you want to have a component and, inside it, another component. For this your parent component should to have a <router-outlet></router-outlet> , eg

Your main.component is

<router-outlet></router-outlet>

And your SkillListComponet like

<p>I'm the SkillListComponent</p>
<router-outlet></router-outlet>

But you can to have a path like (see that it's not belong to any "children"

{path: 'skill-list/skill-add,component: SkillAddComponent }

And the "SkillAddComponent" is render in the main.component