typescript - Angular 5 barnroutning


Jag har ett problem med routningen i Angular 5. Jag skulle vilja skapa en barnrutt, men när jag skriver in URL:en (för barnruten) laddas föräldrakomponenten. Min routing:

path: 'user-admin/:id',
component: UserAdminComponent,
},
children: [
  {
    path: '',
    component: UserAdminComponent,
    pathMatch: 'full'
  },
  {
    path: "final-exams",
    component: FinalExamsComponent,
  },

De två rutterna som tillhör problemet:

http://localhost:4200/user-admin/0

http://localhost:4200/user-admin/0/final-exams

Tack för din hjälp i förväg! :)

Svar #1

Ta en titt på den fungerande lösningen

Stack Blitz, källkod

user-admin/1/Hej kommer att skrivas ut

user-admin/1/final-exams/Hola kommer att vara utdata

Problemet var:

Du nämnde samma komponent i både föräldra- och barnrouten, och barnrutter nämndes inte inuti föräldrarouten

const appRoutes: Routes = [
  {
    path: 'user-admin/:id',
    // component: HelloComponent, // No need to mention the same component, in parent
    children: [     // Children routes are inside the parent route
      {
        path: '',
        component: HelloComponent,
        pathMatch: 'full'
      },
      {
        path: "final-exams",
        component: HolaComponent
      }
    ]
  }
];

Svar #2

Du stänger vägen innan du tillåter barnen att komma in på den:

{
  path: 'user-admin/:id',
  component: UserAdminComponent,
  children: [
    {path: '', component: UserAdminComponent, pathMatch: 'full'}, 
    {path: 'final-exams', component: FinalExamsComponent}, 
  ]
},

Just nu sätter du en } innan du börjar children.