Angular 5 子路由答案

【问题标题】：Angular 5 child routingAngular 5 子路由
【发布时间】：2018-08-10 13:46:46
【问题描述】：

我对 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

提前感谢您的帮助！ :)

【问题讨论】：

这个 sn-p 看起来很奇怪。孩子们不应该在上面的对象内吗？
你的父组件中有<router-outlet> 吗？

标签： angular typescript routing

【解决方案1】：

在这种情况下，您不需要向 UserAdminComponent 添加子路由并打开/关闭大括号，如下所示。试试这个代码。

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

【讨论】：

【解决方案2】：

看看可行的解决方案

Stack Blitz, Source Code

user-admin/1 // 将打印 Hello

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

问题是：

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

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

【讨论】：

【解决方案3】：

如果路由final-exams 及其在FinalExamsComponent 中的内容需要与UserAdminComponent 的内容一起呈现，您可以使用无组件路由来实现您的要求。像这样

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

这样，当您转到http://localhost:4200/user-admin/0 时，您只会渲染与user-admin/:id 关联的UserAdminComponent。访问http://localhost:4200/user-admin/0/final-exams 将同时呈现UserAdminComponent 和FinalExamsComponent 的内容

您可以阅读有关无组件路由here。

【讨论】：

【解决方案4】：

你在让孩子们进入之前关闭了路径：

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

目前，您在开始 children 之前输入 }。

【讨论】：