Angular 5 子路由

Question

我有一个关于 Angular 5 中路由的问题。我想创建一个子路由，但是当我输入 url(对于子路由)时，父组件被加载。 我的路线:

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

属于问题的两条路线:

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

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

提前感谢您的帮助! :)

Answer 1

Have a look at the working solution

Stack Blitz, Source Code

user-admin/1//你好将被打印

user-admin/1/final-exams//Hola 将是输出

Problem was:

您在父路由和子路由中都提到了相同的组件，而在父路由中未提及子路由

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
      }
    ]
  }
];