angular - 如何让孙子在 Angular 6 中使用祖 parent <router-outlet>

Question

我有一个我在这次堆栈 Blitz 中寻找的示例: https://angular-czk5vj.stackblitz.io/

基本上我想做的是让孙子路由在祖级路由器导出中渲染。

即 路线: 雇员 ---> Emp 报告 ------>报告详细信息

查看

当单击第一列中的姓名时，它会路由到第二列中的员工报告。单击第二列中的报告时，会在第三列中显示报告详细信息。

我觉得我需要在路由中完成此操作的原因是我希望能够通过 url (employees/11/reportdetail/2) 发送准确的报告，以便应用程序可以在该报告上打开。我愿意接受另一种方法来实现这一目标。

Answer 1

您的实现中存在一些命名约定的严重问题。所以我决定创建自己的。它没有模块的延迟加载，但这是您已经知道并且可以实现的。

回到您的要求，您可以将每个级别实现为到上一个级别的子路由。因此，作为父组件的每个组件模板中都会有一个 router-outlet 标记。

所以你的routes配置可以看起来像这样:

const routes: Routes = [
  { path: 'employees', component: EmployeesComponent, children: [
    { path: ':id', component: ReportsComponent, children: [
      { path: 'detail/:repId', component: DetailsComponent },
      { path: '**', component: PlaceholderComponent }
    ] },
    { path: '**', component: PlaceholderComponent }
  ] },
  { path: '**', redirectTo: '/employees', pathMatch: 'full' }
];

请注意，这里我还有一个 PlaceholderComponent，如果需要从列表中选择一个项目，它将显示。

我使用 Bootstraps Grids 来管理三列内容的分布。这就是您所需要的。

---

这是一个Working Sample StackBlitz供您引用。